Function for calling a CSS callback with jQuery

Question

Function for calling a CSS callback with jQuery

I am currently working on enhancing my search bar using jQuery, and I am also looking to hide the navigation links.

Here is a snippet of the jQuery code I have been using. The code functions properly when focused.

$(".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 properly, except that it displays the content before the animation is complete.

Therefore, I am looking for a way to ensure that

$("#navlinks").css('display','block');

is only executed once the animation is complete.

If anyone knows how to achieve this, I would greatly appreciate the help.

Thank you

javascript jquery css css-animations

Answer 1

Answer №1

The .css() method does not include a callback function, but the .animate() method does. By setting the time to 0 and using animate, you can achieve the desired effect.

$(".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: I have also included the necessary delay as suggested by eicto. (Thank you eicto)

Answer 2

The .css() method does not include a callback function, but the .animate() method does. By setting the time to 0 and using animate, you can achieve the desired effect.

$(".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: I have also included the necessary delay as suggested by eicto. (Thank you eicto)

Answer 3

Answer №2

Given that you are aware of the duration of your animations, why not consider using setTimeout() following a CSS modification? It seems that your animation lasts approximately 0.5 seconds. By specifying the same duration in milliseconds, you can smoothly execute your "callback" at the conclusion of the animation.

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

Answer 4

Given that you are aware of the duration of your animations, why not consider using setTimeout() following a CSS modification? It seems that your animation lasts approximately 0.5 seconds. By specifying the same duration in milliseconds, you can smoothly execute your "callback" at the conclusion of the animation.

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

Answer 5

Answer №3

If you're looking for a smooth animation effect, I suggest using the .animate() function in jQuery like this:

$(".searchBox input").focus(function(){
    $(this).animate({
        'width': '100px'       
    }, 500, function() {
        $("#navlinks").css('display', 'block');
    });
});

This code snippet is compatible with all browsers and ensures that the #navlinks command will execute only after the animation is finished. Remember, the 500 value represents the duration of the animation in milliseconds, so feel free to adjust it to your liking.

For more information on the .animate() method, you can refer to the documentation here: http://api.jquery.com/animate/

Answer 6

If you're looking for a smooth animation effect, I suggest using the .animate() function in jQuery like this:

$(".searchBox input").focus(function(){
    $(this).animate({
        'width': '100px'       
    }, 500, function() {
        $("#navlinks").css('display', 'block');
    });
});

This code snippet is compatible with all browsers and ensures that the #navlinks command will execute only after the animation is finished. Remember, the 500 value represents the duration of the animation in milliseconds, so feel free to adjust it to your liking.

For more information on the .animate() method, you can refer to the documentation here: http://api.jquery.com/animate/

Answer 7

Answer №4

I found a different approach when I encountered a similar situation:

$('.something').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
    function(event) {
        // Executing actions after the transition ends

 });

This code snippet demonstrates how to perform tasks after a transition has completed.

More information can be found at:

Best regards,
Lars

Answer 8

I found a different approach when I encountered a similar situation:

$('.something').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
    function(event) {
        // Executing actions after the transition ends

 });

This code snippet demonstrates how to perform tasks after a transition has completed.

More information can be found at:

Best regards,
Lars

Answer 9

Answer №5

Click here to learn about the concept of the transitionend event and how it can be implemented.

CSS:

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

}

JS:

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

Check out the DEMO

Answer 10

Click here to learn about the concept of the transitionend event and how it can be implemented.

CSS:

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

}

JS:

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

Check out the DEMO

Function for calling a CSS callback with jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Explore within the <li> element using jQuery

Change the colors of a dynamic row in an HTML table using various options

The html carousel displays stacked images instead of scrolling

Tips for utilizing maps in a react component within a Next.js application

Looking to encode/decode a JSON response in order to transfer it to a different webpage

Executing a controller method in Grails using JavaScript

What is the best way to apply a class to the initial div using jquery?

Display every div element if none of the links have been clicked

Utilizing jQuery for displaying or hiding list elements

Activate the button solely when the text field has been populated without any spaces

Utilizing Ajax looping to generate dynamic HTML content with Bootstrap tabs

Steps to create spaces between the bootstrap cards

Is it possible to deploy a build across various website subdomains without altering user data?

In the Vercel production environment, when building Next.js getStaticPaths with URL parameters, the slashes are represented as %

The press of the Enter key does not trigger the button

Tips to detect a specific animation completion on an element?

Add middleware to one individual store

Encountering a 404 error while trying to refresh the page in a React App hosted on Her

Utilizing tables for inquiries in email communication

Displaying Date in Angular 2 Application with Proper Formatting