0

我想让我的滑块有几个元素飞入然后飞出。

我的问题是飞出效果很好，但无论我做什么，我都无法让下一张幻灯片正常工作。

这是动画/幻灯片更改的 jquery：

                    $active.children('h3, .slide-desc').animate({ 
                        right: 970, 
                        easing: 'easeInOutExpo'
                    }, 1800);
                    $active.children('.slider-button').delay(100).animate({ 
                        right: 970, 
                        easing: 'easeInOutExpo'
                    }, 1800);
                    $active.children('.slide-bg').delay(200).animate({ 
                        left: 970, 
                        easing: 'easeInOutExpo'
                    }, 1200);

                    $next.delay(1400).fadeIn(settings.animationDuration, function () {
                        $active.children('.slide-bg, h3, .slide-desc, .slider-button').css({"left":"","right":""});
                        $active.hide();
                        current = next;
                        $active = $next;
                        animating = false;
                    });

我尝试复制活动和反转动画（同时使包含的 LI 可见并将元素推到屏幕左侧），但这些动画似乎发生在动画不应该发生的时期。

有人对我应该做什么（jQuery noob）有任何示例或想法吗？

4

1 回答 1

0

Figured it out..

$next = slides.eq(next);

                    $active.children('h3, .slide-desc').animate({ 
                        left: "-970px", 
                        easing: 'easeOutExpo'
                    }, 1700);
                    $active.children('.slider-button').delay(300).animate({ 
                        left: "-970px", 
                        easing: 'easeOutExpo'
                    }, 1700);
                    $active.children('.slide-bg').delay(200).animate({ 
                        right: "-970px", 
                        easing: 'easeOutExpo'
                    }, 1000);

                    $next.children('h3, .slide-desc').delay(500).animate({ 
                        left: 0, 
                        easing: 'easeInOutExpo'
                    }, 1700);
                    $next.children('.slider-button').delay(10).animate({ 
                        left: 0, 
                        easing: 'easeInOutExpo'
                    }, 1700);
                    $next.children('.slide-bg').delay(1300).animate({ 
                        right: 0,
                        easing: 'easeInOutExpo'
                    }, 800, function () {

                        current = next;
                        $active = $next;
                        animating = false;
                    });

For the first slide, I use:

slides.eq(current).children('h3, .slide-desc, .slider-button').css({"left":"","right":""});
slides.eq(current).children('.slide-bg, .slide-img').css({"left":"","right":""});

And to set defaults:

slides.children('h3, .slide-desc, .slider-button').css({"left":"-970px","right":""});
slides.children('.slide-bg, .slide-img').css({"right":"-970px","left":""});

It's a crap solution, and I haven't adjusted the timing, but it will work until I have someone else do it right.

I think I will stick with not working with jQuery. I'm sure this will kill someone's browser who is running 1-2gigs of ram.

于 2012-07-08T19:58:40.423 回答