脚本中需要jQuery修改

时间:2011-09-27 07:38:55

标签: jquery jquery-ui jquery-plugins

这是一个用于在字母中滑动的jQuery脚本,但是如何删除最后一类“淡出”以使字母保持在最终位置?这是演示:

http://blog.waiyanlin.net/example/jquery/flyingtext.html

以下是它的脚本:

$(document).ready(function(){

  $('.container .flying-text').css({opacity:0});
  $('.container .active-text').animate({opacity:1, marginLeft: "350px"}, 1000);

  var int = setInterval(changeText, 1000);  


  function changeText(){

    var $activeText = $(".container .active-text"); 

    var $nextText = $activeText.next(); 
    if($activeText.next().length == 0) $nextText = $('.container .flying-text:first');

    $activeText.animate({opacity:0}, 1000);
    $activeText.animate({marginLeft: "-100px"});

    $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "350px"}, 500, function() {
      $activeText.removeClass('active-text');                                         
    });
  }
}); 

2 个答案:

答案 0 :(得分:1)

这非常简单,需要进行2次修改。删除动画,并清除超时。你应该能够自己解决这个问题。

$(document).ready(function(){

  $('.container .flying-text').css({opacity:0});
  $('.container .active-text').animate({opacity:1, marginLeft: "350px"}, 1000);

  var intval = setInterval(changeText, 1000);    

  function changeText() {
    var $activeText = $(".container .active-text"); 
    var $nextText = $activeText.next();

    if ($activeText.next().length == 0) clearInterval(intval);

    $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "350px"}, 500, function(){
      $activeText.removeClass('active-text');                                           
    });
  }
}); 

根据评论,这里是工作jsfiddle示例的链接:http://jsfiddle.net/Q8ZGA/

答案 1 :(得分:0)

如果我理解你是正确的,你需要在动画后留下文字。在这种情况下,请删除此字符串:

$activeText.animate({opacity:0}, 1000);
$activeText.animate({marginLeft: "-100px"});

因为你正在淡出它。

代码(无间隔):http://jsfiddle.net/uedt6/4/