Question

我要添加div标签的动画，例如fadein和fadeout 当用户将鼠标放在div标签上时，那个将被淡出当用户将鼠标移出div标签时，那个将被淡入。
这是测试代码。

          $('#div1').mouseleave(function(){
            $('#div1').fadeIn();
            console.log("out");
          });

          $('#div1').mouseover(function(){
            $('#div1').fadeOut();
            console.log("in");
          });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">hover over me</div>

但是当用户将鼠标放在div标签上时，动画会重复出现我怎么能解决这个问题？

Answer 1

问题是，如果您:hover和fadeOut()发生的事情是元素变为display: none;（您将在我的示例中看到绿色框），那么当它fadeOut()时该元素不再存在，因此mouseleave被调用。解决这个问题的方法是隐藏子元素并保留父元素（orange box），使鼠标仍在父#div1上...

＆＃13;

$('#div1').mouseleave(function(){
  $(this).children('.fade-me').fadeIn();
  console.log("out");
});

$('#div1').mouseover(function(){
  $(this).children('.fade-me').fadeOut();
  console.log("in");
});

＆＃13;

#div1 {
  background-color: orange;
  padding: 10px;
  min-height: 20px;
}

#div1 > div {
  background-color: green;
  padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <div class="fade-me">hover over me</div>
</div>

＆＃13;

您知道只能使用CSS执行此操作吗？如果您只需要一个CSS示例，请与我们联系。

Answer 2

嗯，你不必在这里使用jQuery！你可以使用普通的CSS。

＆＃13;

div {
  background-color: red;
  transition: 1s opacity ease; /* this here makes sure that all changes to the "opacity" element happen over 1 second. */
}
div:hover {
  opacity: 0;
}

＆＃13;

<div>
  Aravind!
</div>

＆＃13;

fadein和fadeout的jquery动画

2 个答案: