單擊事件時停止執行Javascript函數

Question

我有一個名為“ header”的div。 我希望它不斷地從不透明度0.1變為不透明度1，然后淡出回到不透明度0.1，除非單擊它。 在這種情況下，我想停止上述循環。

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

因此，我希望上面的函數可以重復兩個順序，直到單擊“標題”為止。 我怎么能意識到呢？

非常感謝你

Answer 1

您可以這樣做。 多個動畫可以使用動畫隊列，因此一個動畫跟隨另一個動畫隊列，然后使用最后一個動畫的完成功能再次開始循環。

要停止，可以只使用jQuery的.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

我寫了一個小例子來回答你的問題。

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並淡出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示例