Question

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

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

以下是动画/幻灯片更改的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）？

Answer 1

想出来......

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

对于第一张幻灯片，我使用：

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

并设置默认值：

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

这是一个垃圾解决方案，我没有调整时间，但它会一直有效，直到我让别人做对了。

我想我会坚持不使用jQuery。我相信这会杀死正在运行1-2g ram的某人的浏览器。

jQuery Slider - 缓解效果/反转动画

1 个答案: