JQuery Cycle не работает правильно - PullRequest
Новая
       15

JQuery Cycle не работает правильно

0 голосов
/ 02 апреля 2012

Я пытаюсь выполнить функцию после показа моего первого слайда. Я в основном хочу делать ту же функцию после каждого слайда, но мой второй слайд просто неподвижен. Ничто не исчезает и не входит.

Вот мой 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>

Это работает для первого слайда .. анимация для текста, но на 2-м слайде это не работает.

Ответы [ 2 ]

0 голосов
/ 02 апреля 2012

Я понял это.Вы должны по-разному именовать элементы в функциях «до» и «после».

У меня были оба элемента с именем #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);
        }

Так что теперь я могу вносить изменения в отдельные слайды так, как я планировал.

0 голосов
/ 02 апреля 2012

Измените containerResize: false на containerResize: true, тогда оно должно работать.

См. Демо здесь

...