JQuery зависла

0

Когда я нависаю над img, который исчезает до другого img и слишком быстро перетекает, fadeOut застревает, а затемнение исчезает. Я пробовал.stop(), как я видел в других ответах, но все равно не сработает. Есть ли что-то еще, что я могу поставить вместо.stop()?

<div class="grid big-square">
  <a href="#"><img id="image2" src="img/fade/creo.png">
  <img id="image1" src="img/creo.jpg"></a>
</div>

<script>
$("#image1").mouseenter(function () {
    $(this).stop(true, true).fadeOut(1000);
});

$("#image2").mouseleave(function () {
    $("#image1").stop(true, true).fadeIn(500);
});
</script>
  • 3
    Создать JSFiddle? Вероятно, проблема не в этих строках.
  • 0
    Я не вижу, в чем еще может быть проблема, это единственный jQuery у меня есть. Я добавил код, который связан. Как вы думаете, где еще это может противоречить? @frnhr
Теги:

3 ответа

1
Лучший ответ

Кажется, я помню, что у меня была аналогичная проблема, когда я создавал этот сайт.

Решение состоит в использовании комбинации .hover() и .stop() чтобы гарантировать, что за один раз работает только одна анимация, что, я думаю, у вас есть. Кроме того, убедитесь, что изображение с надписью находится поверх другого изображения, и просто затухайте его. .mouseleave() изображения получает "застревание", потому что при некоторой непрозрачности .mouseleave() останавливает стрельбу, а .mouseenter() начинает стрелять по другому изображению.

Что-то вроде:

$$ = $("#image1");
$$.hover(function () {
    $$.stop().animate({
        opacity: 0
    }, 1000);
}, function () {
    $$.stop().animate({
        opacity: 1
    }, 1000);
});

#image1 должен быть выше #image2 чтобы это работало, #image1 исчезает, чтобы "раскрыть" #image2 за ним. Код использует .animate() а не .fadeIn() и .fadeOut() но эффект тот же.

Edit-, чтобы исчезнуть в другом div после окончания анимации fadeoout, используйте полный вызов функции animate.

Что-то вроде:

$$ = $("#image1");
$$.hover(function () {
    $$.stop().animate({
        opacity: 0
    }, 1000);
}, function () {
    $$.stop().animate({
        opacity: 1
    }, 1000, function() {
        $("#finalDiv").animate({ opacity: 1, 500 });
    });
});

#finalDiv должен быть после того, как 2 <img/>s в вашем html появятся над ними.

  • 0
    Круто, это сработало, но по какой-то причине # image2 все еще должно быть до # image1. Еще один вопрос: что если я захочу затемнить еще один отдельный div поверх изображения, когда оно исчезло? @ Генри Флоренция
  • 0
    Помещение #image1 после #image2 гарантирует, что оно будет нарисовано поверх него. Я думаю, чтобы затем .animate() другой элемент, используйте функцию обратного вызова .animate() как и в другом ответе, см. Редактирование в моем ответе.
0

fiddle

Вы должны использовать анимацию/переход в форме:

.fadeTo( duration, opacity, complete )

где complete - функция обратного вызова.

0

Я не уверен, как вы пытаетесь это сделать, но я знаю, как это должно быть сделано. Попробуйте это http://jsfiddle.net/xy5dj/

Обязательно слушайте оба события на одном и том же элементе (предпочтительно, оберточный элемент). Обратите внимание, что fadeOut фактически удаляет элемент из отображаемого содержимого (display: none), следя за тем, чтобы события мыши не срабатывали над этим элементом.

Боковое примечание: грязный трюк, который я использовал однажды (если вам нужно это сделать, то вы делаете что-то не так) заключается в том, чтобы очистить стиль элемента после анимации, используя функцию обратного вызова функции анимации, т.е.

$('el').animate({opacity:0}, 500, function(){$(this).attr('style', '')});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню