JQuery循环工作不正常

Question

我正在尝试在第一张幻灯片放映后执行一个函数。我基本上想在每张幻灯片之后都做同样的功能，但我的第二张幻灯片只是静止的。没有任何东西正在消退或进入。

这是我的JQuery

$("#slideshow").cycle({
            fx: 'scrollHorz',
            pager: '#slideshow-nav',
            speed: 600,
            timeout: 7000,
            pauseOnPagerHover: true,
            containerResize: false,
            slideResize: false,
            fit: 1,
            before: beforeSlide,
            after: afterSlide
        });
        function beforeSlide() {
            $("#slideText").css('padding-left', '0px');
            $("#slideText").css('opacity', '0');
        }
        function afterSlide() {
            $("#slideText").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
        }

这是我的html

    <div id="slideshow" class="slides">
    <div class="slide" style="background-image: url('slideOne.jpg'); background-color: #e3d7bd;">
        <div id="slideText">
            <h1>asdf</h1>
            <br />
            <p>asdf</p>
            <p>asdf</p><br />
            <a href="" class="started">Get started today</a>
        </div>
    </div>
    <div class="slide" style="background-color: #fff;">
        <img class="slideTwoImage" src="slideTwoKid.png"></img>
        <div id="slideText">
            <h1>Test.</h1>
            <br />
            <p>asdf</p>
            <p>asdf</p><br />
            <a href="" class="started">Get started today</a>
        </div>
    </div>
    <!-- <div class="slide" style="background-image: url('slideTwo.jpg'); background-color: #fff; display: none;"></div>
    <div class="slide" style="background-image: url('slideThree.jpg'); background-color: #000; display: none;"></div> -->
</div>

它适用于第一张幻灯片。。文本的动画，但在第二张幻灯片上它不起作用。

Answer 1

将containerResize: false更改为containerResize: true，则它应该可以工作。

请参阅此处的演示

Answer 2

我想明白了。您必须以不同的方式命名before和after函数中的元素。

正如您在函数中所看到的，我将它们都命名为#slideText。只需将它们分开命名即可。

            $("#slideshow").cycle({
            fx: 'scrollHorz',
            pager: '#slideshow-nav',
            speed: 600,
            timeout: 7000,
            pauseOnPagerHover: true,
            containerResize: true,
            slideResize: false,
            fit: 1,
            before: beforeSlide,
            after: afterSlide
        });
        function beforeSlide() {
            $("#slideText").css('padding-left', '0px');
            $("#slideText").css('opacity', '0');
            $("#slideTextTwo").css('padding-left', '0px');
            $("#slideTextTwo").css('opacity', '0');
        }
        function afterSlide() {
            $("#slideText").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
            $("#slideTextTwo").animate({ opacity: 1, paddingLeft: '+=100px'}, 600);
        }

所以现在我可以按照我的意图在单独的幻灯片上进行更改了。