Question

我有一个名为“标题”的div。我想无限期地从不透明度0.1变为不透明度1，然后逐渐淡化为不透明度0.1，除非它被点击;在这种情况下，我想停止上述周期。

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

所以，我希望上面的函数能够重复这两个命令，直到点击“header”。我怎么能意识到这一点？

非常感谢

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

我写了一点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

在单击事件时停止Javascript函数执行

4 个答案: