jQuery使用平滑的动画效果使文本动画化 [英] Jquery Animate text with smooth flash like animation

问题描述

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

I haven't found any answer to this in a reasonable amount of time on this forum. So here I ask.

我正在尝试使用轻松的摆动"从左到右为文本添加动画效果，但与此同时，使其淡入，然后在结束之前淡出.

I'm trying to animate a text from left to right with the ease 'swing', but at the same time, make it fade in, then fade out before the end.

我通过三个步骤找到了解决方案，但是我很难维护和修改它.通过这种技术，也不可能使用摆动缓动.

I found a solution in three steps but I find it very hard to maintain and modify. With this technique it is also impossible to use the swing easing.

我要做的是:

1. 动画左+ = 10且不透明 在同一动画中从0到0.8 持续1秒钟.
2. 向左+ = 20动画2秒.
3. 动画左+ = 10且不透明 从0.8到0持续1秒.

1. animate left +=10 and opacity from 0 to 0.8 in the same animation for 1 sec.
2. animate left +=20 for 2 sec.
3. animate left +=10 and opacity from 0.8 to 0 for 1 sec.

在代码中:

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

我尝试了其他方法，但是没有达到我想要的效果.在淡出之前，先向右移动.我要在褪色时继续前进.:

I tried something else, but it didn't do what I wanted. the movement to the right stop before the fade out. I want to the keep moving while it is fading out.:

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

有人有更好的解决方案吗?

Does anyone have a better solution?

推荐答案

动画的逻辑可以包装在简单的函数中

Logic of your animation can be wrapped in simple function

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

在此处演示

这篇关于jQuery使用平滑的动画效果使文本动画化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！