Question

我使用jquery到mouseenter和mouseleave，问题是当我从一个div传递到另一个div时，它再次运行，所以我只需要运行一次鼠标输入和鼠标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);
   });
})

我的问题有一个问题： https://jsfiddle.net/DTcHh/21266/

Answer 1

如果您想使用“主”标题...

如果您想使用“主”标题将其应用于所有子标题，那么您可以使用与原始示例类似的方法并定位mouseover和mouseleave个事件为您的主标题，然后将动画应用于所有子元素：

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

以及：

 // 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);
 });

示例（单主标题）

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

如果您想定位单个标题...

目前，你的每一个元素都有类标题，它将自己触发事件，这可能是你想要的：

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

此效果会被放大，因为每次mouseover或mouseleave事件发生时，它都会为每个header元素设置动画：

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

如果您只希望动画影响正在悬停的标题，只需将内部动画选择器更改为使用$(this)而不是$('.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);
});

示例（单个子标题）

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

Answer 2

在父div上添加master-header课程。

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

然后做那个事件：

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

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

添加高度（也可能是宽度）：

.master-header {
  height: 400px;
}

此外，如果mouseenter事件已经动画完成动画，请考虑分离SELECT staff.* FROM staff JOIN class_host ON staff.staff_id = class_host.host_id JOIN class ON class_host.class_id = class.class_id JOIN classroom ON classroom.classroom_id = class.classroom_id WHERE classroom.gps_lat BETWEEN $ARRAY_VALEUR[0] AND $ARRAY_VALEUR[2] AND classroom.classroom_gps_lon BETWEEN $ARRAY_VALEUR[1] AND $ARRAY_VALEUR[3];事件。

Answer 3

如果我理解你的意图正确，那么问题不在于事件，而在于动画：

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

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

}）

如果我的意图合适，请告诉我。 Fiddle

函数被多次调用

3 个答案: