jQuery slideToggle與fadeTo一起使用時行爲不正確

我想更改div的不透明度，然後向上或向下滑動它以查看其內容，但滑動動畫表現得非常奇怪，如下所示：jQuery slideToggle與fadeTo一起使用時行爲不正確

但是，如果我刪除了點擊函數中的fadeTo，滑動就像它應該那樣工作。

我在這裏錯過了什麼讓#user_box div改變不透明度然後滑動？

標記：

<div id="user_bar"></div> 
    <div id="user_box"> 
     <a href="#">blah</a> 
     <a href="#">blah</a> 
     <a href="#">blah</a>   
    </div>

JS：

$("#user_bar").hover(function(){ 
    $(this).fadeTo(100, 0.5); 
}, function(){ 
    $(this).fadeTo(100, 0.7); 
}); 

$("#user_bar").click(function(){ 
    $("#user_box").fadeTo(0, 0.5); 
    $("#user_box").slideToggle(); 
});

CSS：

#user_bar { 
    height: 10px; 
    width:100%; 
    position: fixed; 
    top: 80px;  
    left: 0; 
    right: 0; 
    overflow:hidden;  
    cursor: pointer; 
    background-color: #000; 
} 

#user_box { 
    display:none; 
    width: 100%; 
    height: 50px; 
    position: fixed; 
    top: 90px;  
    left: 0; 
    right: 0; 
    overflow:hidden;  
    background-color: #000; 
}

來源

2012-01-25 user1168320

測序是很簡單的，你只需要調用的slideToggle（）在回調fadeTo（）。

bugginess是一個不同的故事。我無法猜測爲什麼fadeTo（）會將slideToggle（）弄糊塗並使其始終關閉而不是打開。

但是，我能夠通過使用動畫（繞過IT）直接：

$("#user_bar").click(function(){ 
    $("#user_box").animate({opacity: .5}, { 
     duration: 100, 
     complete: function() { $('#user_box').slideToggle(); } 
    }); 
});

Here is an update to your fiddle demonstrating this

來源

2012-01-25 02:08:31 Kato

謝謝！這是一個很好的解決方案。 – user1168320

謝謝。如果你願意的話，我強烈懷疑你也可能朝相反的方向發展。即直接使用slideUp/slideDown，而不是slideToggle。 – Kato

變化user_box到user_bar：

$("#user_bar").click(function(){ 
    $("#user_bar").fadeTo(0, 0.5); 
    $("#user_box").slideToggle();

}）;

編輯：或者更好的是，將其更改爲$（本）

來源

2012-01-25 01:58:30 ryankeairns

感謝您的快速回復！這確實解決了滑動問題，但它是#user_box，我想在滑動它之前更改不透明度 – user1168320

jQuery slideToggle與fadeTo一起使用時行爲不正確

回答

相關問題