使用jquery在连续循环中从左到右的文本动画

Text animation from left and right in continuous loop using jquery

本文关键字：从左到右 文本 动画 循环 jquery 连续 使用      更新时间：2023-09-26

我想在连续循环中从左到右流畅地设置文本动画。有人能建议我这里有小提琴链接吗http://jsfiddle.net/yLNGn/3/

 $(document).ready(function () {
    $('.kp').animate({
        left: '10px'
    }, 600);
    $('.kp').delay(600).animate({
        left: '-128px'
    }, 600);
    $('.rp').delay(2000).animate({
        left: '10px'
    }, 600);
    $('.rp').delay(600).animate({
        left: '-108px'
    }, 600);
    $('.kpp').delay(4000).animate({
        left: '10px'
    }, 600);
});

请看下面的答案。我把它作为小提琴的单独功能，见这里。

function repeat() {
    $('.kp').animate({
    left: '10px'
}, 600);
$('.kp').delay(600).animate({
    left: '-128px'
}, 600);
$('.rp').delay(2000).animate({
    left: '10px'
}, 600);
$('.rp').delay(600).animate({
    left: '-108px'
}, 600);
$('.kpp').delay(4000).animate({
    left: '10px'
}, 600);
    $('.kpp').delay(600).animate({
        left:'-108px'
   },600 ,function() {
        repeat();
    });
}

Fiddle

希望它能有所帮助。

好吧，你可以使用setInterval函数，或者如果你使用jquery animate方法的完整回调：

$(document).ready(function () {
  console.log('ready');
  var james = $('#bond');
  var right = function () {
    james.animate({left: '100px'}, 600, left);
  };
  var left = function () {
    james.animate({left: '0px'}, 600, right);
  };
  right();
});

这是完整的fiddle示例：http://jsfiddle.net/yLNGn/32/

你考虑过使用这个jQuery插件吗？

相关文章：