Question

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

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

谢谢你的支持。

Answer 1

您可以使用fadeIn()简化代码，因为您使用的是jquery

这里有一个例子

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

$(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
      });
    })
  });

＆＃13;

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

＆＃13;

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

＆＃13;

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

淡入效果不适用于第一次悬停

3 个答案: