jquery褪色內容跳轉

Question

我正試圖實現以下內容。我想要在兩個不同的div之間淡出動畫。動畫是成功的。只有當一個div淡出時，div衰落的內容纔會跳下來。我認爲它是一個動畫定時問題。

$('#btn').click(function() { 
    $('#services').fadeOut('slow', function(){ 
     $('#prices').fadeIn('slow'); 
     }); 

    if ($('#services').is(':visible')) { 
     $('#services').fadeOut('slow'); 
     $('#prices').fadeIn('slow') 
     $('#btn').html('Services'); 
    } else { 
     $('#btn').html('Prices'); 
     $('#prices').fadeOut('slow'); 
     $('#services').fadeIn('slow') 
    } 
}); 

我在網上找不到任何解決方案。這是我的http://jsfiddle.net/z7E3A/4/

Answer 1

你需要把第二次衰落行動放在第一次衰落行動的完整功能。此外，如果您緩存jQuery的元素，因爲我們多次

重複使用它，它會更有效

http://jsfiddle.net/z7E3A/7/

var btn = $('#btn'); 
var service = $('#services'); 
var price = $('#prices'); 

btn.click(function() { 
    service.fadeOut('slow', function(){ 
     price.fadeIn('slow'); 
    }); 

    if (service.is(':visible')) { 
     service.fadeOut('slow', function(){ 
      price.fadeIn('slow'); 
      btn.html('Services'); 
     }); 

    } else { 
     price.fadeOut('slow', function() { 
      service.fadeIn('slow'); 
      btn.html('Prices'); 
     }); 

    } 
}); 

Answer 2

Simpelest解決方案是淡出後運行淡入像這樣：

$('#btn').click(function() { 
    $('#services').fadeOut('slow', function(){ 
     $('#prices').fadeIn('slow'); 
     }); 

    if ($('#services').is(':visible')) { 
     $('#services').fadeOut('slow', function(){ 
      $('#prices').fadeIn('slow'); 
     }); 
     $('#btn').html('Services'); 
    } else { 
     $('#btn').html('Prices'); 
     $('#prices').fadeOut('slow', function(){ 
      $('#services').fadeIn('slow'); 
     }); 
    } 
}); 

查看小提琴：http://jsfiddle.net/z7E3A/5/

另一種方法是讓其中一個div通過CSS絕對定位：

#services { 
    width: 100%; 
    height: auto; 
    background: yellow; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

這將導致更流暢的動畫，但如果div的高度不同，將不會很容易。