Function gets called many times

Question

I use jquery to mouseenter and mouseleave, the problem is when I pass from one div to another div, it run again, so I just need to run one time one mouse enter and mouse leav.

<div class="row">
  <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
  <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
  <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
  <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
</div>


body {
    height:1000px;
    width:100%;
    background-color:#F0F0F0;
}

#header_div {
    width:100%;
    height:100px;
    position:fixed;
    top:0;
    left:0;
}
#header_div img {
    max-height: 100%;
    max-width: 100%;
}

$(document).ready(function () {
   $(".header").mouseleave(function () {
       $(".header").animate({
           height: "50px"
       }, 600);
   });

   $(".header").mouseenter(function () {
       $(".header").animate({
           height: "100px"
       }, 600);
   });
})

There is a Jsfiddle of my problem: https://jsfiddle.net/DTcHh/21266/

Why did you tag C#/ASP.NET MVC if this is a Javascript problem? Please only tag the languages/technologies you actually have a question about. — Camilo Terevinto, Jun 02 '16 at 19:54
Please put the relevant parts of your code *in the question*. — Matt Burland, Jun 02 '16 at 19:57
Please include all relevant code in your post and **don't** just include a link to jsFiddle. Your post should stand alone from any other resource; consider what would happen if jsFiddle went down in the future! (It would be *terrible,* we know.) — rrauenza, Jun 02 '16 at 19:59
The root of your problem is that your animation changes the size of your divs causing your mouse to be entering and leaving different divs — Matt Burland, Jun 02 '16 at 19:59
This might help: http://stackoverflow.com/questions/724911/how-do-i-find-out-with-jquery-if-an-element-is-being-animated — Matt Burland, Jun 02 '16 at 20:00
You're css selectors are also identifying the wrong element(s). You should change #header_div to .header so that they are actually applied. If they do no apply to this example, please remove them from the code sample. Also keep in mind it will be easier to debug if your .header elements were inline-block so you can actually tell what element you are hovering in and out of. — Ben Sewards, Jun 02 '16 at 20:01

Rion Williams · Answer 1 · 2016-06-02T20:10:05.707

If you want to use a "master" header...

If you want to use a "master" header that would apply this to all of your child headers, then you could use a similar approach to your original example and target the mouseover and mouseleave events for your main header and then apply the animation to all of the child elements :

<div id='main-header' class="row">
        <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
        <!-- More headers omitted for brevity -->
</div>

along with :

 // When your main header is hovered, animate all of the sub headers
 $("#main-header").mouseleave(function () {
       $('.header').animate({  height: "50px" }, 600);
 });
 $("#main-header").mouseenter(function () {
       $('.header').animate({ height: "100px" }, 600);
 });

Example (Single Main Header)

$("#main-header").mouseleave(function() {
  $('.header').animate({
    height: "50px"
  }, 600);
});
$("#main-header").mouseenter(function() {
  $('.header').animate({
    height: "100px"
  }, 600);
});

body {
  height: 1000px;
  width: 100%;
  background-color: #F0F0F0;
}
#header_div {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
}
#header_div img {
  max-height: 100%;
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main-header' class="row">
  <div class="col-md-4 header">
    <img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" />
  </div>
  <div class="col-md-4 header">
    <img src="http://www.mandroid.in/demo/srems/images/news_image_02.jpg" />
  </div>
  <div class="col-md-4 header">
    <img src="http://www.mandroid.in/demo/srems/images/news_image_03.jpg" />
  </div>
  <div class="col-md-4 header">
    <img src="http://www.mandroid.in/demo/srems/images/news_image_04.jpg" />
  </div>
</div>

If you want to target individual headers...

Currently, every one of your elements has the class header, which is going to trigger the event on it's own, which may be what you are going for :

<div class="row">           
        <div class="col-md-4 header" >
            <!-- Image omitted for brevity -->
        </div>
        <div class="col-md-4 header" >
            <!-- Image omitted for brevity -->
        </div>
        <div class="col-md-4 header" >
            <!-- Image omitted for brevity -->
        </div>
        <div class="col-md-4 header" >
            <!-- Image omitted for brevity -->
        </div>
</div>

This effect is magnified because each time a mouseover or mouseleave event occurs, it's animating every header element :

// When any header is hovered over
$(".header").mouseleave(function () {
       // Animate every header
       $(".header").animate({  height: "50px" }, 600);
});

If you only want the animation to affect the header being hovered, simply change your inner animate selector to use $(this) instead of $('.header') :

$(".header").mouseleave(function () {
    // Only animate the current element
    $(this).animate({height: "50px" }, 600);
});

$(".header").mouseenter(function () {
    // Only animate the current element
    $(this).animate({ height: "100px"}, 600);
});

Example (Individual Child Headers)

$(document).ready(function() {
  $(".header").mouseleave(function() {
    $(this).animate({
      height: "50px"
    }, 600);
  });

  $(".header").mouseenter(function() {
    $(this).animate({
      height: "100px"
    }, 600);
  });
})

body {
  height: 1000px;
  width: 100%;
  background-color: #F0F0F0;
}
#header_div {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
}
#header_div img {
  max-height: 100%;
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-4 header">
    <img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" />
  </div>
  <div class="col-md-4 header">
    <img src="http://www.mandroid.in/demo/srems/images/news_image_02.jpg" />
  </div>
  <div class="col-md-4 header">
    <img src="http://www.mandroid.in/demo/srems/images/news_image_03.jpg" />
  </div>
  <div class="col-md-4 header">
    <img src="http://www.mandroid.in/demo/srems/images/news_image_04.jpg" />
  </div>
</div>

Just to add a little bit more to the physical explanation for his case. When you are placing your mouse over div 2 for example, it moves down, and now all of a sudden your mouse has left div 2 and is now in div 1. This triggers a loop of neverending mouseenter and mouseleave events because they all are labeled with the same class in the jquery. You'll notice in the original jfiddle, if you place your mouse only the top section of the highest div, you don't have this looping effect occur. — JoeL, Jun 02 '16 at 20:09

score 1 · Accepted Answer · answered Jun 02 '16 at 20:03

Add a master-header class at the parent div.

 <div class="row master-header">
    <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
    <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
    <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
    <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
</div>

Then do the event on that:

$(document).ready(function () {
   $(".master-header").mouseleave(function () {
       $(".header").animate({
           height: "50px"
       }, 600);
   });

   $(".master-header").mouseenter(function () {
       $(".header").animate({
           height: "100px"
       }, 600);
   });
})

Add a height (and maybe width too):

.master-header {
  height: 400px;
}

Also, consider detaching the mouseenter event if it's already animating Reattach once it's done animating.

Nice!, one question, can I resize text to? instead of img? – Gerry Jun 02 '16 at 21:46 — Gerry, Jun 02 '16 at 21:46

score 0 · Answer 3 · answered Jun 02 '16 at 20:02

0

If I understood your intention correctly, then your problem is not with the event but with the animation:

$(document).ready(function () {
   $(".header img").mouseleave(function () {
       $(this).stop().animate({
           height: "50px"
       }, 600);
   });

   $(".header img").mouseenter(function () {
       $(this).stop().animate({
           height: "100px"
       }, 600);
   });

})

Let me know if I got your intention right. Fiddle.

answered Jun 02 '16 at 20:02

guessimtoolate

8,372
2
18
26

Nice!, one question, can I resize text to? instead of img? – Gerry Jun 02 '16 at 21:47
I haven't seen any text there, but I [suppose you could](https://jsfiddle.net/3u2k1y5w/1/). Notice that I target text container and not the text itself, because it is a block and has a height I can animate (you can wrap your text in some other element and make it a block). Feel free to experiment with that fiddle. I changed the selector to `.header img` because it gives a nicer effect that `.header`, where the image inside is not scaled (but that could be remedied changing the selector for the animated element). – guessimtoolate Jun 02 '16 at 22:00
But the text can´t be bigger as div? – Gerry Jun 02 '16 at 22:23
There's probably a way to do that. Perhaps with a different animation or by styling the text differently, but i don't know it. – guessimtoolate Jun 03 '16 at 05:32

Function gets called many times

3 Answers3