爲什麼slideDown動畫首先自動進行slideUp動畫？

我只是點擊一個按鈕而添加了一些結果。我正在使用slideDown方法來顯示這些新結果，但不知道爲什麼這些新結果先是slideUp，然後再執行slideDown動畫。當我清除添加的結果時，它會立即被刪除而不會動畫。爲什麼slideDown動畫首先自動進行slideUp動畫？

請對這個演示一下：http://jsbin.com/imulem

$('#sb').click (function(){ 
var html = ''; 

    html += "<div class='result'>" + 'fake results.. ' + '</div>'; 
    html += "<div class='result'>" + 'fake results.. ' + '</div>'; 
    html += "<div class='result'>" + 'fake results.. ' + '</div>'; 
    $(html).hide().prependTo('#searchresults').slideDown('slow'); 
     }); 


$('#clearb').click (function(){ 
      $('#searchresults>div').slideUp('slow').remove(); 
     });

來源

2012-05-24 Rakesh Juyal

我給.result名爲h0具有height: 0px;性能等級。這樣當你點擊#sb時，他們沒有高度。動畫結束後，您應該刪除div。

對於鉻問題，請將從all轉換爲background-color。

你可以找到工作案例here。

CSS

.h0 { height: 0px; } 
#searchresults .result{ 
    padding: 1.2em; 
    margin-left: 2em; 
    color: #690011; 
    border-radius: 1.8em; 
    -webkit-transition: background-color 1s ease-in-out; 
    background-color: #F0B616; 
}

的Javascript

$('#sb').click (function(){ 
    var html = ''; 

    html += "<div class='result h0'>" + 'fake results.. ' + '</div>'; 
    html += "<div class='result h0'>" + 'fake results.. ' + '</div>'; 
    html += "<div class='result h0'>" + 'fake results.. ' + '</div>'; 
    $(html).hide().prependTo('#searchresults').slideDown('slow'); 
}); 


$('#clearb').click (function(){ 
    var $divs = $('#searchresults>div'); 
    $divs.slideUp('slow', function() { $divs.remove(); }); 
});

來源

2012-05-24 10:08:28

不錯，它看起來很好:) –

這個腳本在chrome中有同樣的問題 – supercoolville

那裏，修正了chrome問題。 :) –

這個CSS是導致它：

-webkit-transition: all 1s ease-in-out;

來源

2012-05-24 10:05:09 supercoolville

但我需要這個鼠標懸停效果。 –

爲什麼slideDown動畫首先自動進行slideUp動畫？

回答

相關問題