淡出一个元素然后淡入另一个元素

Question

我试图实现一种效果，即在元素A悬停时，元素B都在元素A内，元素B为fadeOut，元素C为fadeIn。

这就是我尝试过的：

$('.button').hover(function() {
	info = $(this).find('.info');
	download = $(this).find('.download');

	info.stop().fadeOut(150, function() {
		download.stop().fadeIn(150);
	})
}, function() {
	download.stop().fadeOut(150, function() {
		info.stop().fadeIn(150);
	})
})

.button {
  background-color: orange;
  padding: 10px;
  width: 250px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 10px;
}

.download {
  display: none;
  font-size: 17px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
  <div class="info">
    <i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
  </div>
  <div class="download">Download</div>
</div>

<div class="button">
  <div class="info">
    <i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
  </div>
  <div class="download">Download</div>
</div>

<div class="button">
  <div class="info">
    <i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
  </div>
  <div class="download">Download</div>
</div>

<div class="button">
  <div class="info">
    <i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
  </div>
  <div class="download">Download</div>
</div>

一次悬停一个元素似乎效果很好，但是当您尝试同时悬停更多元素时，动画将开始中断。

有解决方案吗？接受其他方法。谢谢。

Answer 1

主要问题是在分配动画之前先停止动画。这样就不会出现小故障：

$('.button').each(function(i) {
    var thisButton = $(this);
    var thisInfo = thisButton.find('.info');
    var thisDownload = thisButton.find('.download');
    thisButton.on('mouseenter', function(e) {
        thisDownload.stop();
        thisInfo.stop().fadeOut(150, function() {
            thisDownload.stop().fadeIn(150);
        });
    }).on('mouseleave', function(e) {
        thisInfo.stop();
        thisDownload.stop().fadeOut(150, function() {
            thisInfo.stop().fadeIn(150);
        });
    });
});

.button {
  background-color: orange;
  padding: 10px;
  width: 250px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 10px;
}

.download {
  display: none;
  font-size: 17px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
    <div class="button_inner">
        <div class="info">
            <i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
        </div>
        <div class="download">Download</div>
    </div>
</div>

<div class="button">
    <div class="button_inner">
        <div class="info">
            <i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
        </div>
        <div class="download">Download</div>
    </div>
</div>

<div class="button">
    <div class="button_inner">
        <div class="info">
            <i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
        </div>
        <div class="download">Download</div>
    </div>
</div>

也在JSFiddle

发布此消息是因为这可能会在天际线的答案上发生：

Answer 2

通过省略info，download或var关键字，无意中为let和const创建了全局变量。这意味着每个函数调用都在使用和覆盖这些变量。您需要在每个函数中创建局部变量。

$('.button').hover(function() {
  var info = $(this).find('.info');
  var download = $(this).find('.download');

  download.stop();
  info.stop().fadeOut(150, function() {
    download.stop().fadeIn(150);
  })
}, function() {
  var info = $(this).find('.info');
  var download = $(this).find('.download');

  info.stop();
  download.stop().fadeOut(150, function() {
    info.stop().fadeIn(150);
  })
})

.button {
  background-color: orange;
  padding: 10px;
  width: 250px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 10px;
}

.download {
  display: none;
  font-size: 17px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
  <div class="info">
    <i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
  </div>
  <div class="download">Download</div>
</div>

<div class="button">
  <div class="info">
    <i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
  </div>
  <div class="download">Download</div>
</div>

<div class="button">
  <div class="info">
    <i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
  </div>
  <div class="download">Download</div>
</div>

<div class="button">
  <div class="info">
    <i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
  </div>
  <div class="download">Download</div>
</div>