Question

I am trying to do a function after my first slide has shown. I basically want to do the same function after each slide, but my 2nd slide is just still. Nothing is fading in or coming in.

Here is my 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);
        }

Here is my 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>

It works for the first slide..the animation for the text, but on the 2nd slide it is not working.

Answer 1

I figured it out. You have to name elements in the before and after function differently.

I had them both named #slideText as you can tell in the functions. Just name them separate.

            $("#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);
        }

So now I can make changes on separate slides the way I intended.