Как остановить непрерывный цикл jQuery fade in fade out/fadeto?

Question

Как остановить непрерывный цикл jQuery fade in fade out/fadeto?

Я хотел бы, чтобы мой логотип стал невидимым через 5 секунд, что я смог сделать. Я также хочу, чтобы логотип снова появлялся, когда мышь находится над моим заголовком div, а затем снова исчезал, если мышь перемещается с заголовка div. Проблема в том, что после наведения мыши на заголовок div, а затем удаления его, он исчезает непрерывно в течение 3 раз, почти как эффект мигания. Как я могу предотвратить это?

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

<script type="text/javascript">

    $(document).ready(function () {

        $('#logo').delay(5000).fadeTo( 5000, 0 );

    });

</script>



<script type="text/javascript">

function showLogo()

{

    $('#logo').fadeTo( 2500, 1 );

}

</script>



<script type="text/javascript">

function hideLogo() {

    $('#logo').delay(2500).fadeTo( 2500, 0 );

}

</script>

Это HTML:

<header id="header" onmouseover="showLogo()" onmouseout="hideLogo()">

<div id="logo">

<img src="images/logo.png">

</div>

Пожалуйста, помогите! Спасибо!

702 2

jQuery fadein fadeout fadeto

2 ответов:

Comments

Ничего не найдено.

undefined · Accepted Answer · 2014-11-23 12:15:38

Вы можете использовать stop() Метод:
$('#header').hover(function(){
    $('#logo').stop().fadeToggle(2500);
});

Mark M · Accepted Answer · 2012-06-02 20:38:07

Мне повезло со следующим:
$(document).ready(function () {
    $('#logo').delay(5000).fadeTo( 5000, 0 );
    $('#header').mouseenter(function(e){showLogo();});
    $('#header').mouseleave(function(e){hideLogo();});
});
Вместо подключения обработчиков в теге заголовка.