Question

这是我的jquery代码。这个代码包含三个函数。这三个函数重复执行循环。但是这个代码没有正常运行。用三个函数进行递归调用.pid1，pid2，pid3是段落标记id。此代码用于制作文本动画。

$(document).ready(function(){
 function animate() 
   {    
     $('#pid1').fadeOut(3000, function()
    {
     $(this).text('string1').fadeIn(3000);
    }); 
    animate1();
   }
 function animate1()
  {
   $('#pid2').fadeOut(3000, function()
   {
   $(this).text('string2').fadeIn(3000);
   });
   animate2();
  }
function animate2() 
  {
   $('#pid3').fadeOut(3000, function()
   {
   $(this).text('string3').fadeIn(3000);
   });      
   animate();   
  }
  });

Answer 1

尝试这样：

$(document).ready(function(){
    function animate() {    
        $.when($('#pid1').fadeOut(3000, function() {
            $(this).text('string1').fadeIn(3000);
        })).then(function() {
            animate1();
        });
    }
    function animate1() {
        $.when($('#pid2').fadeOut(3000, function() {
            $(this).text('string2').fadeIn(3000);
        })).then(function() {
            animate2();
        });
    }
    function animate2() {
        $.when($('#pid3').fadeOut(3000, function() {
            $(this).text('string3').fadeIn(3000);
        })).then(function() {
            animate();
        });
    }
    animate();
});

这里有一个jsFiddle：http://jsfiddle.net/Pascalz/CNRSd/

Answer 2

确保元素有淡出后，必须再次调用该函数。你应该使用fadeout回调函数

改变你的功能：

 function animate() 
 {    
     $('#pid1').fadeOut(3000, function()
     {
        $(this).text('string1').fadeIn(3000, function(){animate(); });
     }); 
 }

Answer 3

以下是使用回调函数

的jsbin链接

animate by using callback

如何使jquery无限循环

3 个答案: