Quirky jQuery on rollover

Question

My developer is having trouble creating a smooth and efficient transition on this page. Please roll over the logo "Clockrun" and notice how the text changes once fully visible (especially in Chrome) and how quirky the roll over affect is when rolling off and on the logo.

here is the jQuery being used. Is there a better way of doing this so the transition fades in and out much more smoothly?

jQuery(document).ready(function(){

        jQuery(".super_featured_desc").css("opacity",0);
        jQuery(".super_featured_logo").each(function(){
          jQuery(this).hover(
              function () {
                jQuery(this).children(".super_featured_desc").css("display","block");
                jQuery(this).children(".super_featured_desc").animate({"opacity": 1}, 400);
              },
              function () {
                jQuery(this).children(".super_featured_desc").css("display","none");
                jQuery(this).children(".super_featured_desc").animate({"opacity": 0}, 400);
              }
          )
        });
    });
    </script>

If you roll off and on it continues to fade in and out. It also does not fade out correctly. — Michael Rader, Nov 15 '12 at 08:15

score 2 · Accepted Answer · answered Nov 15 '12 at 08:14

2

Please try using stop:

.stop(true, true) API: http://api.jquery.com/stop/

or look in here effects http://docs.jquery.com/Effects you can add show with slow effect.

If you can flick me jsfiddle I can make it for you, hope this will help :)

code

jQuery(document).ready(function(){

        jQuery(".super_featured_desc").css("opacity",0);
        jQuery(".super_featured_logo").each(function(){
          jQuery(this).hover(
              function () {
                jQuery(this).children(".super_featured_desc").css("display","block");
                jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 1}, 400);
              },
              function () {
                jQuery(this).children(".super_featured_desc").css("display","none");
                jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 0}, 400);
              }
          )
        });
    });

answered Nov 15 '12 at 08:14

Tats_innit

33,991
10
71
77

This actually works much better. But what about the disappearing when you roll off instead of the gradual fade out? – Michael Rader Nov 15 '12 at 08:17
@TommyCoffee Glad it helped `:)` you should look for event called `fadeOut` and chain it accordingly. `:)` try like this `.fadeOut('slow');` – Tats_innit Nov 15 '12 at 08:18
I don't know how this is done. This is code from my developer. how would I do that? – Michael Rader Nov 15 '12 at 08:20
@TommyCoffee see here how: ==> there are sample of code with stop and fadeout ==> http://stackoverflow.com/questions/11713665/using-fade-in-fade-out-with-jquery `:)` – Tats_innit Nov 15 '12 at 08:23
@TommyCoffee +1 to you as well `:)` – Tats_innit Nov 15 '12 at 08:32

score 0 · Answer 2 · answered Nov 15 '12 at 08:25

To achieve a gradual fade on mouseout use a callback on the mouseout animation and insert your jQuery(this).children(".super_featured_desc").css("display","none"); there:

    jQuery(document).ready(function(){

            jQuery(".super_featured_desc").css("opacity",0);
            jQuery(".super_featured_logo").each(function(){
              jQuery(this).hover(
                  function () {
                    jQuery(this).children(".super_featured_desc").css("display","block");
                    jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 1}, 400);
                  },
                  function () {
                    jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 0}, 400, function(){
    jQuery(this).css("display","none");
    });
                  }
              )
            });
        });

Quirky jQuery on rollover

2 Answers2