Question

我试图通过帮助jquery animate和step函数淡出我的div，但我的逻辑不起作用。当动画功能降低我的div高度＆amp;时，我想淡出div宽度为50％。我的意思是当div的高度＆amp;宽度几乎变成了一半然后我想非常顺利地淡出div。

我的代码正在运行，但效果我想要不可能。所以请查看我的代码并尽可能纠正它。这里是你可以看到实现的网址。 http://jsfiddle.net/Sj4eG/12/

只需要修改以下部分

 grower.animate({width:0, height:0, left:(windowWidth/2 - $('#grower').width()),  top:(windowHeight/2 - $('#grower').height())},
 {
duration: 1000,
step: function(now, fx) {
                alert(now);
    if (fx.prop == "height") {
        var threshold = fx.start / 2;

        if (now < 150) {
            $(fx.elem).css("opacity", now / threshold);
        }
    }
}
});

Answer 1

类似于this？

抱歉它没有居中！

Answer 2

您可以尝试不同的方法：不使用step函数并重新计算opacity，您可以在动画时使用specialEasing属性。这允许您为每个动画属性设置不同的缓动您现在要做的就是定义一个缓动函数，该函数在动画达到其进度的50％之前不会设置动画。
这可以很容易地完成（here's the resource帮助我理解缓动功能）：

$.easing['my_easing_name'] = function(p){
    return p < 0.5
               ? 0
               : 2 * (p-0.5);
};

然后你就可以使用它：

$('element').animate({
        prop1 : value1,
        prop2 : value2
    },{
        duration : 1000,
        specialEasing : {
            prop1 : 'liniar',
            prop2 : 'my_easing_name'
       }
});

以下是我的版本演示：http://jsfiddle.net/gion_13/Sj4eG/32/

jquery动画和步骤函数用法

2 个答案: