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然后它应该有效。

请参阅演示here

Answer 2

我明白了。您必须以不同的方式命名前后函数中的元素。

我把它们都命名为#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);
        }

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

JQuery Cycle无法正常工作

2 个答案: