Question

我有一个影响多个幻灯片元素的补间。目前，当滑块初始化时，我每次只播放补间，但它会影响每个幻灯片中具有目标类的元素，而不仅仅是当前幻灯片，有时您可以看到隐藏的元素显示当补间发生的时候。

有没有办法用tweenmax设置补间，以便它可以在具有相同类的元素上重用，但不能同时运行？

代码：

<div id="slider-wrapper">
    <ul class="slides">
        <li style="background: url(http://lorempixel.com/400/200/nature/1) center center / cover no-repeat;">
            <span class="slide-text">
                <h2>Heading Text</h2>
                <h3>Subheader Text</h3>
            </span>
        </li>
        <li style="background: url(http://lorempixel.com/400/200/nature/3) center center / cover no-repeat;">
            <span class="slide-text">
                <h2>Heading Text</h2>
                <h3>Subheader Text</h3>
            </span>
        </li>
    </ul>
    <div class="slide-direction">
        <div class="prev-slide"></div>
        <div class="next-slide"></div>
    </div>
</div>
<script>
    $(document).ready(function() {

        var dropIn = TweenMax.from(".slides .slide-text", 0.75, {top: "-400px", transform: "scale(0.5)", ease: Back.easeOut.config(1)});
        $(".slides").cycle({
            // options
            slides: '>li',
            timeout: 4500,
            speed: 1450, // Transition speed. This must give the tween on the .slide-text enough time to complete the reversal out
            manualSpeed: 1450,
            next: '.slide-direction .next-slide',
            prev: '.slide-direction .prev-slide',
            pauseOnHover: true,
            swipe: true,
            swipeFx: 'fade'
        }).on('cycle-initialized', function(currSlide){
            // when the slider is fully loaded
            dropIn.play();
        }).on('cycle-after', function(currSlide){
            // when the slide transition is completed
            dropIn.play();
        }).on('cycle-before', function(currSlide){
            // just before the transition is started
            dropIn.reverse();
        });

    });
</script>

See the fiddle here

Answer 1

我找到了解决方案。由于无法重复使用由变量设置的tweenmax补间（我可以找到...），这就是我最终要做的事情：

        // Set the initialized state before the slider is initialized
        $(document).on('cycle-initialized', ".slides", function(){
            // when the slider is fully loaded
            TweenMax.fromTo(
                $(".cycle-slide-active .slide-text"), 0.75, {top: "-400px", transform: "scale(0.5)", ease: Back.easeOut.config(1)}, {top: "120px", transform: "scale(1)", ease: Back.easeOut.config(1)}
            );
        })

        var homeSlider = $(".slides").cycle({
            // options
            slides: '>li',
            timeout: 4500,
            speed: 1450,
            manualSpeed: 1450,
            next: '.slide-direction .next-slide',
            prev: '.slide-direction .prev-slide',
            pauseOnHover: true,
            autoHeight: 1,
            swipe: true,
            swipeFx: 'fade'
        }).on('cycle-after', function(){
            // when the slide transition is completed
            TweenMax.fromTo(
                $(".cycle-slide-active .slide-text"), 0.75, {top: "-400px", transform: "scale(0.5)", ease: Back.easeOut.config(1)}, {top: "120px", transform: "scale(1)", ease: Back.easeOut.config(1)}
            );
        }).on('cycle-before', function(){
            // just before the transition is started
            TweenMax.fromTo(
                $(".cycle-slide-active .slide-text"), 0.75, {top: "120px", transform: "scale(1)", ease: Back.easeOut.config(1)}, {top: "-400px", transform: "scale(0.5)", ease: Back.easeOut.config(1)}
            );
        });

Updated Fiddle

如何在预先构建的内容滑块中重复使用tweenmax补间？

1 个答案: