javascript - jQuery Toggle doesn't work properly and mixes up animations -
i want achieve following:
when user click on link "a#showhideuser", several animations performed:
- .users shown (it class taking whole screen , darkens it)
user1 #user2 , #user3 displayed (just showing
profile picture , user-name) blending in changing height of classes.
when link pressed again, should disappear again.
it should more or less old tumblr-app "new entry"-menu
the problem toggling works perfectly, doesn't. have observed these possibilities after clicking link:
- everything works fine (both slide in , slide out again)
- .users displayed fine, other 3 divs disappear instead of sliding in (mostly happens when clicked link several times already) when wait little, 3 divs appear again
- .users displayed fine, other 3 divs appear disappear again. here well: when wait little, 3 appear again
that's code (all in same .js-file) (updated)
$(document).ready(function () { $('.route').hide(); $('a#showhideroute').click(function () { $('.route').toggle(400); $('a#showhideroute').toggleclass('active'); }); $('.frage').hide(); $('a#showhidefrage').click(function () { $('.frage').toggle(400); }); $('.users').hide(); $('#user1').hide(); $('#user2').hide(); $('#user3').hide(); $('a#showhideuser').click(function () { $('.users').fadetoggle(200); $('#user1').animate({height:'toggle'},200); $('#user2').animate({height:'toggle'},200); $('#user3').animate({height:'toggle'},200); }).finish(true, false); });
what doing wrong here?
thanks lot! :)
seems you're having troubles animation queuing.
i suggest adding .finish(true, false)
before starting new animation. stop animation in it's place without skipping end; new animation start last 1 got stopped.
Comments
Post a Comment