jQuery slideToggle not behaving properly when used with fadeTo -

jQuery slideToggle not behaving properly when used with fadeTo -

i alter opacity of div , slide or downwards view contents sliding animation behaving strangely, can seen here:

http://jsfiddle.net/nsytr/

if remove fadeto in click function however, sliding works should.

what missing here create #user_box div alter opacity , slide?

markup:

<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; }

the sequencing simple enough, need phone call slidetoggle() in callback fadeto().

the bugginess different story. can't guess why fadeto() mucks slidetoggle() , makes close rather open.

however, able circumvent using animate() directly:

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

here update fiddle demonstrating this

jquery slidetoggle fadeto