fadeIn is working but not fadeOut on Menu item mouse hover

2
votes

Please help; I am developing a site and I want an image to fadeIn and fadeOut on mouseenter and mouseleave.

http://postimg.org/image/s82v127cp/

Please take a look on the image above. This is the state when mouseenter and it comes with fadeIn effect. So fadeIn works cool, but fadeout has no effect! I am using following code to achieve this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>


    
    $(document).ready(function(){
        $("#menu-item-67").mouseenter(function(){
            $("#text-11").hide().fadeIn(1000);
        });

      $("#menu-item-67").mouseleave(function(){
        $("#text-11").fadeOut(1000);
      });
    });
2
jqueryhoverfadeinmenuitemfadeout
try $("#text-11").show().fadeOut(1000); – Tushar Gupta - curioustushar
Your code is working for : jsfiddle.net/dMz8Q/1 You should realize that since you have a time of 1000ms, it'll take 2 seconds for your image to hide after you have first mouseentered. – AdityaSaxena
I tried all the solutions mentioned by all of you but unfortunately nothing works. So I decided to put the development url so that you can kindly help me out in this: goo.gl/JDg1Wq – web chitra
This appears to be working for me, what browser are you using? – Mister Epic
@ChrisHardie I have tried in both i.e. Mozilla and Chrome! No luck! – web chitra

2 Answers

0
votes

You can simply do this:

$(document).ready(function(){
 $('#menu-item-67').mouseover(function(){
  $("#text-11").fadeToggle(1000);
 });

 $('#menu-item-67').mouseleave(function(){
  $("#text-11").fadeToggle(1000);
 });
});
0
votes
 $(document).ready(function(){
        $("#menu-item-67").hover(
            function(){
                $("#text-11").hide().fadeIn(1000);
            },

            function(){
               $("#text-11").fadeOut(1000);
             }
          );
   });