jQuery css call back function

Question

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

PlantTheIdea · Answer 1 · 2013-01-28T23:15:05.220

16

.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)

edited Jan 28 '13 at 23:15

answered Jan 28 '13 at 23:09

PlantTheIdea

16,061
5
35
40

Totally wrong. jQuery will not wait (or even know about) for the CSS animation. – SLaks Jan 28 '13 at 23:11
than use animate without transition – zb' Jan 28 '13 at 23:11
@eicto: That's slower, especially on mobile – SLaks Jan 28 '13 at 23:12
2

use delay() than with time of css animation – zb' Jan 28 '13 at 23:13

freedev · Accepted Answer · 2013-01-28T23:33:59.107

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

score 3 · Answer 3 · answered Jan 28 '13 at 23:17

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/

score 1 · Answer 4 · answered Aug 09 '18 at 10:32

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

zb' · Answer 5 · 2013-01-28T23:45:09.510

-1

Here is described transitionend event, let's try that:

CSS:

#test {
    width: 100px;
    border: 1px solid black;
    -webkit-transition: all 1s;
    -moz-transition all 1s;
    transition all 1s;
}
#test.wide {
    width: 200px;

}

JS:

var test = $('#test');
 test.bind('transitionend webkitTransitionEnd oTransitionEnd', function () {
        $('body').append('<div>END!</div>');
    })
$('button').click(function () {
    test.toggleClass('wide');
});

DEMO

edited Jan 28 '13 at 23:45

answered Jan 28 '13 at 23:21

zb'

8,071
4
41
68

I tried your sample on my iPad but it did not work at all... :( – freedev Jan 28 '13 at 23:27
Transition works. But it did not appear the div at end of animation. May be try to specify a different element instead of "body" – freedev Jan 28 '13 at 23:36
you can try, as i told, it works for me and I have no iPad to check. – zb' Jan 28 '13 at 23:37
No way. I have tried modifying your sample (http://jsfiddle.net/nUVU8/4/) but it continue to not catch the event transitionend. I'll double check your link. – freedev Jan 28 '13 at 23:43
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/23533/discussion-between-eicto-and-freedev) – zb' Jan 28 '13 at 23:45
I 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. http://jsfiddle.net/nUVU8/7/ – freedev Jan 28 '13 at 23:45
1

I added oTransitionEnd and webkitTransitionEnd as described [here](https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions#Browser_compatibility) – zb' Jan 28 '13 at 23:48

jQuery css call back function

5 Answers5