Question

我正在使用jQuery Tools scrollable制作图片幻灯片。有没有办法自定义动画，而不是easing它淡出/淡入？

在我尝试新插件之前，我想确保没有一种简单的方法来改变转换。我已经将插件集成在几个部分中，并且更喜欢扩展它而不是使用新的插件。

作者提供了自定义缓动功能，但我不知道如何使其淡化：

// custom easing called "custom"
$.easing.custom = function (x, t, b, c, d) {
    var s = 1.70158; 
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
// use the custom easing
$("div.scrollable").scrollable({easing: 'custom', speed: 700, circular: true});

Answer 1

缓动函数只定义一个值从A到B的形状，它不能显式淡入或淡出。使用此库可以收听您可以收听的事件 - 您可以尝试逐渐淡出onBeforeSeek，然后淡出onSeek所述的$(".scrollable").scrollable({ onBeforeSeek: function (e,i) { $("#items").fadeOut(); }, onSeek: function (e,i) { $("#items").fadeIn(); } });事件。

如果您的商品容器有id ='items'：

{{1}}

Answer 2

首先，您应该设置speed: 0，以便它不会以任何方式为动作制作动画。

然后我会缓存.items包装器，以便函数不会每次都搜索DOM。

我还会使用.fadeTo()代替'fadeIn/Out，因为你真正想做的就是改变不透明度，而不是display:property。请参阅jQuery文档：.fadeTo()

您不需要传递事件e和索引i参数：

var $items = $('.scrollable .items');

$(".scrollable").scrollable({
    speed: 0,            
    onBeforeSeek: function() {
        $items.fadeTo(0,0);
    },
    onSeek: function() {
        $items.fadeTo('fast',1);
    }
)};

如何在jQuery中将缓动更改为淡入淡出

2 个答案: