Остановить выполнение функции Javascript при событии click

Question

У меня есть div с именем «header». Я хочу, чтобы он бесконечно переходил от непрозрачности 0,1 к непрозрачности 1, а затем исчезал до непрозрачности 0.1, если только не щелкнул; в этом случае я хочу остановить вышеуказанный цикл.

$('#header').fadeTo(4000, 1.0); 
$('#header').fadeTo(4000, 0.1); 

Итак, я хочу, чтобы вышеуказанное было в функции, которая будет повторять два порядка до тех пор, пока не будет нажата «заголовок». Как я могу это понять?

Большое спасибо

Answer 1

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

Чтобы остановить, вы можете просто использовать jQuery's .stop(), который остановит текущую анимацию и очистит очередь.

Для полноты я устанавливаю непрозрачность до известного значения после остановки анимации.

function fadeHeader() { 
    $('#header').fadeTo(4000, 1.0).fadeTo(4000, 0.1, fadeHeader); 
} 

// start the repeating animation 
fadeHeader(); 

// stop the animation upon a click 
$('#header').click(function() { 
    $(this).stop(true).css("opacity", "1.0"); 
}); 

Работа демо: http://jsfiddle.net/jfriend00/ctgLk/

Answer 2

var headerclicked = false; 

function doheadercheck() 
{ 
    if(!headerclicked) 
    { 
    if("#header").hasClass("fadein")) 
    { 
     //Fade out 
     $("#header").removeClass("fadein").fadeTo(4000,0.1,doheadercheck); 
    } 
    else 
    { 
     //Fade in 
     $("#header").addClass("fadein").fadeTo(4000,1,doheadercheck); 
    } 
    } 
} 

doheadercheck(); 
$("#header").click(function() 
{ 
    headerclicked = true; 
    $("#header").stop(true).fadeTo(250,1); 
}); 

Попробуйте, как это :)

Answer 3

я написал небольшую example, чтобы ответить на ваш вопрос.

var stop = false; 

var myFadeIn = function() { 
    if (!stop) { 
     $('#header').fadeIn(1000, myFadeOut); 
    } 
}; 

var myFadeOut = function() { 
    if (!stop) { 
     $('#header').fadeOut(1000, myFadeIn); 
    } 
}; 

$(document).ready(function() { 
    myFadeOut(); 
    $('#header').click(function() { 
     stop = true; 
    }); 
}); 

В принципе вы можете написать две функции, чтобы исчезнуть в DIV и исчезать его, что обратный вызов друг друга в конце каждой анимации. Затем вы присоединяете обратный вызов щелчка, чтобы разбить цикл обратного вызова. Надеюсь это поможет.

Answer 4

Я предлагаю вам использовать jQuery animate API

function animation(){ 
    $("#header") 
     .animate({opacity: 0.1}, {duration: "slow"}) 
     .animate({opacity: 1.0}, {duration: "slow", done: animation}); 
} 


$(function() { 
    $("#header").click(function(){ $(this).stop(true); }); 
    animation(); 
}); 

jsFiddle example Проверить