0

我有一个名为“标题”的 div。我希望它无休止地从不透明度 0.1 变为不透明度 1，然后淡入不透明度 0.1，除非它被点击；在那种情况下，我想停止上述循环。

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

因此，我希望将上述内容放在一个函数中，该函数将重复两个命令，直到单击“标题”。我怎么能意识到这一点？

非常感谢

4

4 回答 4

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/

于 2013-09-02T22:05:12.370 回答
0

我写了一个小例子来回答你的问题。 

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，它们在每个动画结束时相互回调。然后你附加一个点击回调来打破回调循环。希望这可以帮助。

于 2013-09-02T22:17:55.707 回答
0 
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);
});

试试这样:)

于 2013-09-02T22:07:43.357 回答
0

我建议你使用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 示例

于 2013-09-02T22:29:52.180 回答