Я пытаюсь добиться эффекта, когда при наведении курсора на элемент A элемент B равен fadeOut, а элемент C равен fadeIn, оба находятся внутри элемента A.

Вот что я пробовал:

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

При наведении курсора на один элемент за один раз все работает нормально, но при попытке одновременного наведения нескольких элементов анимация начинает разрушаться.

Любое решение? Другие подходы принимаются. Спасибо.

1
Keaire 29 Май 2019 в 23:41

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>
1
skyline3000 30 Май 2019 в 13:43

Основная проблема - остановить анимацию перед назначением другой. Таким образом, нет никаких глюков:

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

Опубликовать это, потому что это может произойти с ответом горизонта:

enter image description here

2
skobaljic 29 Май 2019 в 21:19
56368214