jQuery FadeOut不工作

Question

function fadeInSubheader() { 
    $('#sub1').fadeIn().delay(1000).queue(function() { 
     $('#sub2').fadeIn().delay(1000).queue(function() { 
      $('#sub3').fadeIn().delay(5000).queue(function() { 
       fadeOutSubheader(); 
      }); 
     }); 
    }); 

} 

function fadeOutSubheader() { 
    console.log('fading out'); 
    $('#sub1').fadeOut(function() { 
     $('#sub2').fadeOut(function() { 
      $('#sub3').fadeOut(function() { 
       fadeInSubheader(); 
      }); 
     }); 
    }); 
} 

它應該循環一次開始。但是它會啓動並調用fadeOutSubheader函數，因爲控制檯日誌顯示「淡出」像它應該的那樣，但它們不會淡出。有任何想法嗎？

PS。淡出應該最好發生。

Answer 1

按照jQery doc爲.queue()，當您使用.queue(fn)，你必須.dequeue()在功能保持事情正常。你可以看到它在這裏工作：http://jsfiddle.net/jfriend00/Py2hL/。

function fadeInSubheader() { 
    $('#sub1').fadeIn().delay(1000).queue(function() { 
     $(this).dequeue(); 
     $('#sub2').fadeIn().delay(1000).queue(function() { 
      $(this).dequeue(); 
      $('#sub3').fadeIn().delay(5000).queue(function() { 
       $(this).dequeue(); 
       fadeOutSubheader(); 
      }); 
     }); 
    }); 

} 

function fadeOutSubheader() { 
    console.log('fading out'); 
    $('#sub1').fadeOut(function() { 
     $('#sub2').fadeOut(function() { 
      $('#sub3').fadeOut(function() { 
       fadeInSubheader(); 
      }); 
     }); 
    }); 
} 

如果你真的想fadeOuts全部一起去，然後更換fadeOutSubheader()這個只運行一次全部：

function fadeOutSubheader() { 
    console.log('fading out'); 
    $('#sub1, #sub2').fadeOut(); 
    $('#sub3').fadeOut(fadeInSubheader); 
} 

這也是在這裏實現：http://jsfiddle.net/jfriend00/BYGpa/

Answer 2

1. 您沒有使用.dequeue()這會導致您的循環出現問題。根據文檔，「出隊基本上刪除並執行隊列中的下一個功能，讓序列繼續。」
2. 要淡出所有3項一次，像你寫你想要的，只需使用：$('#sub1,#sub2,#sub3').fadeOut()然後使用回叫一次，那些衰落的所有3個使用：.promise().done(fadeInSubheader)（見下面的示例所示）

Working example

$(function() { // on ready 

    // Define functions as local variables 
var fadeInSubheader = function() { 
    $('#sub1').fadeIn().delay(1000).queue(function() {    
     $('#sub2').fadeIn().delay(1000).queue(function() { 
      $('#sub3').fadeIn().delay(5000).queue(function() { 
       fadeOutSubheader(); 
       $(this).dequeue(); 
      }); 
      $(this).dequeue(); 
     }); 
     $(this).dequeue(); 
    }); 

}, 
fadeOutSubheader = function() { 
    console.log(++i); 
    // since jQuery 1.6 you can use promise/done so that 
    // the callback only happeens once - default is once for each element 
    $('#sub1,#sub2,#sub3').fadeOut(1000).promise().done(fadeInSubheader);   
}, i=0; 

    // Let's start the loop! 
    fadeInSubheader(); 

});