在兩個jQuery動畫中間執行代碼？

我有以下代碼切換一些全屏幕背景圖像（fadeout，fadeIn）。在兩個jQuery動畫中間執行代碼？

setInterval(function() { 
     var id = parseInt($('img.active').attr('id').substring(3,4)); 
     var id_next = id; 
     switch(id) { 
      case 0: 
       id_next = 1; 
       break; 
      case 1: 
       id_next = 2; 
       break; 
      case 2: 
       id_next = 0; 
       break; 
     } 
     $('img.active').fadeOut('slow', function() { 
      $('img#bg_' + id).removeClass('active'); 
      $('div.start-headline h1').html(hl[id]); 
      $('div.start-headline h2').html(sl[id]); 
     }); 
     $('img#bg_' + id_next).fadeIn('slow', function() { 
       $('img#bg_' + id_next).addClass('active'); 
       $('div.start-switches div').removeClass('active'); 
       $('div.start-switches div#' + id).addClass('active'); 
      }); 
    }, 6000);

我怎麼能知道這個代碼，它應該在這兩個衰落的中間執行這兩條線

$('div.start-headline h1').html(hl[id]); 
$('div.start-headline h2').html(sl[id]);

？現在它執行後的圖像褪色...

在此先感謝！

來源

2012-06-15 Tronic

你想在淡出結束和淡入淡出即將開始之後進行干預嗎？ –

當淡出完成並淡入開始的時候，是的！ – Tronic

我想你在找什麼是要排隊的，所以它運行淡出 - >新排隊 - >淡入

$('img.active').fadeOut('slow', function() { 
    $('img#bg_' + id).removeClass('active'); 
}); 
$('img.active').queue(function() { 
    $('div.start-headline h1').html(hl[id]); 
    $('div.start-headline h2').html(sl[id]); 
    $(this).dequeue(); 
}); 
$('img#bg_' + id_next).fadeIn('slow', function() { 
    $('img#bg_' + id_next).addClass('active'); 
    $('div.start-switches div').removeClass('active'); 
    $('div.start-switches div#' + id).addClass('active'); 
});

來源

2012-06-15 14:10:40 hitmanDX

謝謝，它做得很好！ – Tronic

如果我理解了問題，我認爲你需要把

$('img#bg_' + id_next).fadeIn('slow', function() { 
      $('img#bg_' + id_next).addClass('active'); 
      $('div.start-switches div').removeClass('active'); 
      $('div.start-switches div#' + id).addClass('active'); 
     });

步入回調只是afther的$('img#bg_' + id).removeClass('active');

如果我沒有理解好這個問題，請您可以指定當代碼執行時（如果淡入淡出或之後），所以也許我可以幫助你。

來源

2012-06-15 14:06:55

大致找出「慢」動畫淡出和添加像100毫秒的時間，在延遲中使用該時間。將延遲碼淡出之外出

$('div.start-headline h1').delay(fadeout_time+100).html(hl[id]);

我不知道如果延遲會影響動畫或沒有，但你可以測試一下，看看它是否工作。我想你也可以設置其他的時間間隔與關係到一個你已經有操縱HTML

來源

2012-06-15 14:09:47 Huangism

在兩個jQuery動畫中間執行代碼？

回答

相關問題