Text animation pause and continue

So the below code is what I am using to have text slide in from left and the right at the same time. Unfortunately, I'm unable to pause the first animation after it's complete. I need a delay after the first set of animations. I've tried the delay, setTimeout and setInterval functions but nothing seems to work (thanks @evan for the ideas). Does anyone know how I could accomplish this? Here is a example of what the code below does: [jsfiddle example][1] $(function() { var num = 0; var wordTrue = true; var words = [ {left: "SLAM", right: "FACE"}, {left: "BOOST", right: "JAMZ"} ]; var fadel = $('#fadel'); var fader = $('#fader'); animate(); function animate() { var leftword = words[num].left; var rightword = words[num].right; var first = leftword.slice(0, leftword.indexOf(" ")); first = "" + first + ""; var lastWords = leftword.substring(leftword.indexOf(" ") + 1); var finalString = first + lastWords; fadel .stop() .css('top', '18px') .css('left', '0') .css('opacity', 0) .text(leftword).show(); fader .stop() .css('top', '68px') .css('left', '400px') .css('opacity', 0) .text(rightword).show(); fadel.animate({ opacity: 1, left: '150px' }, 2700, function() { fadel.fadeOut("fast", function() { queueNext().delay(5000); }); }); fader.animate({ opacity: 1, left: '250px' }, 2700, function() { fader.fadeOut("fast"); }); } function queueNext() { if (++num == words.length) num = 0; animate(); } }); [1]: http://jsfiddle.net/xPXqV/1/
Please provide a jsfiddle example.

以上就是Text animation pause and continue的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏