JQuery slideToggle не ведет себя должным образом при использовании fadeTo

Question

Я хотел бы изменить непрозрачность DIV, а затем сдвиньте его вверх или вниз, чтобы просмотреть его содержимое, но скользящая анимация ведет себя очень странно, как можно увидеть здесь:

http://jsfiddle.net/NsYtr/

Если я удаляю 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> 

ЯШ:

$("#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; 
} 

Answer 1

Секвенирование достаточно просто, нужно просто позвонить slideToggle() в функции обратного вызова для fadeTo().

Багги - это совсем другая история. Я не могу догадаться, почему fadeTo() mucks вверх slideToggle() и делает его всегда закрытым, а не открытым.

Однако, я смог обойти его с помощью одушевленных() непосредственно:

$("#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

Answer 2

изменение user_box в user_bar:

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

});

EDIT: или еще лучше, изменить его на $ (это)