淡出效果不适用于第一次悬停答案

【问题标题】：Fade effect doesn't apply on first hover淡出效果不适用于第一次悬停
【发布时间】：2018-02-18 06:49:08
【问题描述】：

我正在尝试制作淡入淡出和滑动效果，它实际上工作正常，但第一次悬停时仍有问题，淡入淡出效果不适用，有人知道出了什么问题吗？

$(document).ready(function() {
  $(".example").hide();
  $('.show').mouseenter(function() {
    $(this).siblings('.example').stop(true, false).animate({
      height: 'show'
    }, 200);
    $(this).siblings('.example').animate({
      opacity: 1
    }, {
      queue: false,
      duration: 500
    });
  })
  $('.show').mouseleave(function() {
    $(this).siblings('.example').stop(true, false).animate({
      height: 'hide'
    }, 200);
    $(this).siblings('.example').animate({
      opacity: 0
    }, {
      queue: false,
      duration: 200
    });
  })
});

.example {
  background-color: blue;
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button type="button" class="show">Show</button>
  <div class="example"></div>
</div>
<div>
  <button type="button" class="show">Show</button>
  <div class="example"></div>
</div>
<div>
  <button type="button" class="show">Show</button>
  <div class="example"></div>
</div>

感谢您的帮助。

【问题讨论】：

我不知道你的问题在哪里，因为你的小提琴对我来说很好用

标签： jquery

【解决方案1】：

我能够通过将 opacity: 0; 添加到您的 CSS 来解决您的问题。最初，默认情况下已经定义了不透明度。初始悬停不会调整该值，因为它已经相同。设置为0，动画生效。

$(document).ready(function() {
    $(".example").hide();
    $('.show').mouseenter(function() {
      $(this).siblings('.example').stop(true, false).animate({
        height: 'show'
      }, 200);
      $(this).siblings('.example').animate({
        opacity: 1
      }, {
        queue: false,
        duration: 500
      });
    })
    $('.show').mouseleave(function() {
      $(this).siblings('.example').stop(true, false).animate({
        height: 'hide'
      }, 200);
      $(this).siblings('.example').animate({
        opacity: 0
      }, {
        queue: false,
        duration: 200
      });
    })
  });

.example {
			background-color: blue;
			height: 200px;
			width: 200px;
			opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">Div Text</div>
	<div>
		<button type="button" class="show">Show</button>
		<div class="example"></div>
	</div>
	<div>
		<button type="button" class="show">Show</button>
		<div class="example"></div>
	</div>
	<div>
		<button type="button" class="show">Show</button>
		<div class="example"></div>
</div>

【讨论】：

【解决方案2】：

由于您使用 jquery，您可以使用 fadeIn() 简化您的代码

这里是一个例子

$(document).ready(function() {
    $(".example").hide();
    $('.show').mouseenter(function() {
        $(this).next().fadeIn(500)
    }).mouseleave(function() {
        $(this).next().toggle(500)
    })
});

.example {
    background-color: blue;
    height: 200px;
    width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>
    <button type="button" class="show">Show</button>
    <div class="example"></div>

</div>
<div>


    <button type="button" class="show">Show</button>
    <div class="example"></div>
</div>
<div>

    <button type="button" class="show">Show</button>
    <div class="example"></div>
</div>

【讨论】：

【解决方案3】：

您还没有为.example 元素设置不透明度，因此动画会从 1（默认值）淡化到 1（在 mouseenter 脚本中指定）。在 mouseleave 时，不透明度设置为 0，因此第二次将鼠标悬停在 .show 上时，动画会正常运行，从 0 淡入到 1。

要解决此问题，只需将 opacity: 0; 添加到您的 css 以将初始不透明度设置为 0。

.example {
    background-color: blue;
    height: 200px;
    width: 200px;
    opacity: 0;
}

https://jsfiddle.net/y5zndn89/65/

【讨论】：