Home/ Questions/Q 6883767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T05:25:26+00:00

I have a navigation menu that has links with CSS3 transitions with a speed

  • 0

I have a navigation menu that has links with CSS3 transitions with a speed of .2s. When those links are hovered, their submenus are displayed with jQuery using the fadeIn and fadeOut methods also with a speed of .2s (200 milliseconds).

However, the submenus seem to be animating a tad slower than the links. Could this be an easing difference or a difference simply because they’re two completely different ways of “animating” something?

jQuery:

$(document).ready(
  function(){
    $('#nav li').has('ul').hover(
      function(){
        $(this).find('ul').stop(true, true).fadeIn(200);
      },
      function(){
        $(this).find('ul').stop(true, true).fadeOut(200);
      });
});

CSS:

#nav ul li a{
    height: 40px;
    display: block;
    padding: 0 15px;
    background-color: transparent;
    line-height: 40px;
    text-decoration: none;
    color: #ccc;
    text-shadow: 0 -1px 0 #002745;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
}

Is there a way to make them same speed without doing the obvious “speed up the slower animation”?

This obviously isn’t anything major but if it can be fixed, it would be great.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t think you can have an expectation that two completely different means of triggering rendering should have identical speeds. jQuery has overhead it needs to deal with whereas the CSS3 animations will use the built in rendering engine. Off the top of my head I can think of the fact that jQuery’s selector engine sizzler needs to find the target, then it may need to account for browser differences, check the animation queue, etc.

    • 0