Question

我在这个论坛上的合理时间内没有找到任何答案。所以我在这里问。

我试图通过轻松“摆动”从左到右动画文本，但同时让它淡入，然后在结束前淡出。

我通过三个步骤找到了解决方案，但我发现维护和修改非常困难。使用这种技术，也不可能使用摆动缓和。

我的工作是：

动画左+ = 10和不透明度在同一动画中从0到0.8 1秒。
动画左+ = 20，持续2秒。
动画左+ = 10和不透明度从0.8到0持续1秒

在代码中：

$("#teaserText").show().animate({opacity:0.8, left:'+=20'}, 1000, 'linear')
$("#teaserText").animate({left:'+=40'}, 2000, 'linear')
$("#teaserText").animate({opacity:0, left:'+=20'}, 1000, 'linear');

我尝试了其他的东西，但它没有做我想要的。在淡出之前向右移动。我希望它在渐渐消失时继续前进。：

$("#teaserText").show().animate({opacity:0.8},{queue: false, duration: 1000})
$("#teaserText").animate({left:parseInt($("#teaserText").css("left"))+50}, {duration: 3000}, 'swing')
$("#teaserText").animate({opacity:0},{duration: 1000});

有没有人有更好的解决方案？

Answer 1

动画的逻辑可以包含在简单的功能中

function swing_w_fading(selector, animation_options, duration, fade_duration)
{
    if(typeof duration == "undefined")
        duration = 3000;

    if(typeof fade_duration == "undefined")
        fade_duration = 600;

    $(selector).show().animate({opacity:0.8}, {
        queue: false,
        duration: fade_duration
    });
    $(selector).animate(animation_options, duration, 'swing')
    setTimeout(function() {
        $(selector).animate({opacity:0}, {
            queue: false,
            duration: fade_duration
        });
    }, duration - fade_duration);
}

Demo here

Answer 2

您是否看过以下插件？ http://farukat.es/journal/2011/02/514-new-creation-jquery-runloop-plugin

演示： http://files.farukat.es/creations/runloop/

Jquery动画文字像动画一样流畅的闪光

2 个答案: