CODEWITHSUNDEEP
javascriptjquery
Gerry
Gerry

Reputation: 245

Function gets called many times

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/

Upvotes: 0

Views: 74

Answers (3)

Rion Williams
Rion Williams

Reputation: 76547

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)

enter image description here

$("#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)

enter image description here

$(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>

Upvotes: 1

But I&#39;m Not A Wrapper Class
But I&#39;m Not A Wrapper Class

Reputation: 14276

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.

Upvotes: 1

guessimtoolate
guessimtoolate

Reputation: 8632

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.

Upvotes: 0

Related Questions