Анимация Fadeout происходит намного позже, чем предполагалось

Я хочу изменить непрозрачность элемента во время прокрутки, а затем изменить его, как только прокрутка остановилась. Это мой код:Анимация Fadeout происходит намного позже, чем предполагалось

$(window).scroll(function() { 
    $(".BGlogoCircle").fadeTo("fast", 1); 
    console.log("scrolled"); 
    clearTimeout($.data(this, 'scrollTimer')); 
    $.data(this, 'scrollTimer', setTimeout(function() { 
     $(".BGlogoCircle").fadeTo("fast", 0.5); 
     console.log("stopped"); 
    }, 250)); 
});

Это только пол-дела, так как первая часть работает отлично: я перечисляю, элемент выцветает и console.log('scrolled') пожаров.

Как только я прекращаю прокрутку, console.log("stopped") срабатывает, но затем элемент угасает намного позже (примерно 5 секунд или около того, я считаю).

Где моя ошибка и как я могу это исправить?

источник

2016-07-15 BorisG

Создайте скрипку, добавив оставшиеся коды. – frnt

Вы в очереди много fadeTo анимации с этим:

$(".BGlogoCircle").fadeTo("fast", 1);

Как JQuery сохраняет все запущенные анимации (в том же элементе) в очереди и обрабатывает их только тогда, когда ранее поставленных в очередь анимация закончена, она будет только до анимации 0.5, когда все предыдущие анимации выполнены. Их может быть много, так как событие scroll многократно срабатывает при типичном прокрутке.

Вы должны лучше stop любой предыдущий, перед запуском следующего, так что очередь анимации остается пустым:

$(".BGlogoCircle").stop().fadeTo("fast", 1);

Это решает проблему, но я хотел бы предложить, чтобы сделать то же самое с другим вызовом fadeTo:

$(window).scroll(function() { 
    $(".BGlogoCircle").stop().fadeTo("fast", 1); 
    console.log("scrolled"); 
    clearTimeout($.data(this, 'scrollTimer')); 
    $.data(this, 'scrollTimer', setTimeout(function() { 
     $(".BGlogoCircle").stop().fadeTo("fast", 0.5); 
     console.log("stopped"); 
    }, 250)); 
});

источник

2016-07-15 07:44:59 trincot

Попробуйте это:

$(window).scroll(function() { 
 
    $(".BGlogoCircle").fadeIn("slow"); 
 
    clearTimeout($.data(this, 'scrollTimer')); 
 
    $.data(this, 'scrollTimer', setTimeout(function() { 
 
    // do something 
 
    $(".BGlogoCircle").fadeOut("slow"); 
 
    }, 250)); 
 
});

.cool { 
 
    height: 1000px; 
 
} 
 
.BGlogoCircle { 
 
    background: #333333; 
 
    position: fixed; 
 
    width: 100%; 
 
    display: none; 
 
}

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

 
<body> 
 
    <div class="cool"> 
 
    <div class="BGlogoCircle">Test</div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2016-07-15 08:02:32 floooat

Анимация Fadeout происходит намного позже, чем предполагалось

ответ

Смежные вопросы