CODEWITHSUNDEEP
jquery
user734081
user734081

Reputation: 115

Mouseenter and Mouseleave not working smoothly

I have multiple images. When i mouseover on each image it's change to another image and on mouseout get back to its previous image. The problem is that when we doing this process rapidly on every images each image intact to its hover image but not get back to its previous image. But when i slowly doing this the effect and functionality working correctly. I am giving the following code snippet only for two images. Please help me out from this. Sorry for my bad written english.

HTML PART

<div style="float:left;">
   <a class="dialog-link" href="#" >
        <img src="images/twitter.png" width="126" height="78" border="0" class="twitter_h"/>     
   </a>
</div>

<div style="float:left; margin-left:83px;">
<a class="dialog-link" href="#" target="_blank">
<img src="images/linkedin.png" width="232" height="78" border="0" class="linkedin_h"/></a>
</div>

JQUERY PART

<script>
$(function(){

    var link_open=false;
    var openGif_t = $(".twitter_h").attr("src");    
    var closedGif_t = openGif_t.replace("twitter.png", "follow1.png");

    var openGif_l = $(".linkedin_h").attr("src");   
    var closedGif_l = openGif_l.replace("linkedin.png", "connect1.png");

$(".twitter_h")
   .mouseenter(function() {
    $(this).fadeOut(function(){
           $(this).attr("src", closedGif_t);
           $(this).fadeIn(150);
       });
   })
   .mouseleave(function() {
    $(this).fadeOut(function(){
           $(this).attr("src", openGif_t);
           $(this).fadeIn(150);
       });
   });


$(".linkedin_h")
   .mouseenter(function() {
       //alert(closedGif)
       $(this).fadeOut(function(){
           $(this).attr("src", closedGif_l);
           $(this).fadeIn(150);
       });
   })
   .mouseleave(function() {
      // alert($(this).attr("src"));
       $(this).fadeOut(function(){
           $(this).attr("src", openGif_l);
           $(this).fadeIn(150);
       });
   });

});

Upvotes: 0

Views: 643

Answers (4)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

As I said in my comment above, I think .stop() should fix the immediate issue.

In order to keep the code compact, you might consider organising it along the following lines :

$(function() {
    var srcArr = [
        {jq: $(".twitter_h"),  over: "twitter.png",  out: "follow1.png"},
        {jq: $(".linkedin_h"), over: "linkedin.png", out: "connect1.png"}
        //additional lines here
    ];

    $.each(srcArr, function(i, srcObj) {
        obj.mouseover = srcObj.jq.attr("src");
        obj.mouseout = srcObj.mouseover.replace(srcObj.over, srcObj.out);
        obj.jq.on('mouseenter mouseleave', function(e) {
            var $this = $(this).stop().fadeOut(function() {
                $this.attr("src", obj[e.type]);
                $this.fadeIn(150);
            });
        });
    }
});

untested

To handle additional images, simply add lines to the array srcArr.

Upvotes: 0

HMarioD
HMarioD

Reputation: 842

Too much code and too much to do if there are many images with the same behaviour IMHO. Try using CSS transitions and flat javascript, if you want use jquery to change the class use $(...).toggleClass(...).

Upvotes: 0

Nandu
Nandu

Reputation: 3126

The hover() method specifies two functions to run when the mouse pointer hovers over the selected elements.

This method triggers both the mouseenter and mouseleave events.

 $(function(){

        var link_open=false;
        var openGif_t = $(".twitter_h").attr("src");    
        var closedGif_t = openGif_t.replace("twitter.png", "follow1.png");

        var openGif_l = $(".linkedin_h").attr("src");   
        var closedGif_l = openGif_l.replace("linkedin.png", "connect1.png");

    $(".twitter_h").hover(function() {
        $(this).fadeOut(function(){
               $(this).attr("src", closedGif_t);
               $(this).fadeIn(150);
           });
       },
       function() {
        $(this).fadeOut(function(){
               $(this).attr("src", openGif_t);
               $(this).fadeIn(150);
           });
       });


    $(".linkedin_h").hover(function() {
           //alert(closedGif)
           $(this).fadeOut(function(){
               $(this).attr("src", closedGif_l);
               $(this).fadeIn(150);
           });
       },
       function() {
          // alert($(this).attr("src"));
           $(this).fadeOut(function(){
               $(this).attr("src", openGif_l);
               $(this).fadeIn(150);
           });
       });

    });

Upvotes: 1

palaѕн
palaѕн

Reputation: 73936

You can bind the mouse enter and mouse leave events using the convenience method, hover().

Here's a simple example:

$(".twitter_h").hover(

function() {
    console.log("mouseEnter");
    $(this).stop().fadeOut(function() {
        $(this).attr("src", closedGif_t).fadeIn(150);
    });

}, function() {
    console.log("mouseLeave");
    $(this).stop().fadeOut(function() {
        $(this).attr("src", openGif_t).fadeIn(150);
    });
});​

Upvotes: 0

Related Questions