jQuery css call back function
Solution 1
Since you know how long takes your animations, why do not use setTimeout() after CSS change? As far as I see your animation takes about 0.5 seconds. You could easily execute your "callback" seamlessly at end of your animation specifying the same amount of time in milliseconds.
$(".searchBox input").focus(function(){
$(this).css({'width':'100px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
setTimeout( function() {
$("#navlinks").css('display','block');
}, 500);
});
Solution 2
.css() doesn't have a callback function, but .animate() does. Just set the time to 0 and use animate.
$(".searchBox input").on('focus',function(){
$(this).animate({width:100,mozTransition:'width 500ms ease-out',webkitTransition:'width 500ms ease-out',transition:'width 500ms ease-out'},0,function(){
$("#navlinks")
.delay(500)
.css({display:'block'});
});
});
Edit: included delay, which is required. (Thanks eicto)
Solution 3
I would recommend using .animate()
like
$(".searchBox input").focus(function(){
$(this).animate({
'width': '100px'
}, 500, function() {
$("#navlinks").css('display', 'block');
});
});
This will work on all browsers, and the navlinks command will be insured to begin after the animation is complete. Note: the 500
is the number of milliseconds the animation will take to complete, so you can adjust accordingly.
Here is the .animate()
documentation:
http://api.jquery.com/animate/
Solution 4
I came along here, but I used another solution:
$('.something').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
// Do something when the transition ends
});
As you see, this is doing something, when the transition has ended.
This is described here: http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end
Greetings,
Lars
PrivateUser
Updated on August 10, 2020Comments
-
PrivateUser almost 4 years
I'm trying to expand my searchbar using jQuery. Also I want to hide the nav links.
I have some jQuery code like this. This code works fine when focus.
$(".searchBox input").focus(function(){ $("#navlinks").css('display','none'); $(this).css({'width':'200px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'}); }); $(".searchBox input").focus(function(){ $(this).css({'width':'100px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'}); $("#navlinks").css('display','block'); });
The second function also works fine
except it display the content before animation complete.
So I want
$("#navlinks").css('display','block');
to be exectuted only when animate complete.Can anyone tell me how?
Thanks
-
SLaks over 11 yearsTotally wrong. jQuery will not wait (or even know about) for the CSS animation.
-
zb' over 11 yearsthan use animate without transition
-
SLaks over 11 years@eicto: That's slower, especially on mobile
-
zb' over 11 yearsuse delay() than with time of css animation
-
freedev over 11 yearsI tried your sample on my iPad but it did not work at all... :(
-
freedev over 11 yearsTransition works. But it did not appear the div at end of animation. May be try to specify a different element instead of "body"
-
zb' over 11 yearsyou can try, as i told, it works for me and I have no iPad to check.
-
freedev over 11 yearsNo way. I have tried modifying your sample (jsfiddle.net/nUVU8/4) but it continue to not catch the event transitionend. I'll double check your link.
-
zb' over 11 years
-
freedev over 11 yearsI don't know if it is jsfiddler. May be it is. Because I have changed the code following your suggestion and again. The alert did not appear. jsfiddle.net/nUVU8/7
-
zb' over 11 yearsI added oTransitionEnd and webkitTransitionEnd as described here