jquery - 以动画速度淡出/淡入

Question

我正在做一些事情，需要点击一些东西来淡出，做一些事情并淡入。

我找到了这段代码，但我不确定如何以毫秒为单位超时。

$(this).animate({
    opacity:'0'
}, function(){
    //Do something 
    $(this).animate({
        opacity:'1'
    });
});

Answer 1

使用jQuery 函数fadeOut并将fadeIn毫秒数作为第一个参数传递：

$(this).fadeOut(500, function(){
    //Do something 
    $(this).fadeIn(700);
});

默认时间是400。

...或者如果您真的想使用animate()传递duration选项：

$(this).animate({opacity: 0, duration: 500 });

请注意，this可以通过任何 jQuery 选择器（例如".class", "#id"）。

参考：

.fadeOut( [duration ] [, complete ] )

duration (default: 400)

类型：数字或字符串 确定动画将运行多长时间的字符串或数字。

---

complete Type: Function()

动画完成后调用的函数。

淡出| 淡入

Answer 2

$(this).animate({
  opacity:'0'
}, 1000 , function(){
  //Do something 
  $(this).animate({
    opacity:'1'
  }, 1000);
});

在每个 animate{} 函数之后添加“时间”。. .

http://api.jquery.com/animate/

Answer 3

该代码看起来不像您想要的...让我们分解一下。

//On click of element
$("IDofElement").click(function() {
    //Fade out something out
    $("#IDofElementFadingOut").fadeOut(300, function() { //Access the callback (millseconds as first arg)
        //Element has faded out, do something!

        //Something has been done, fadeIn!
        $("IDofElementFadingIn").fadeIn();
    });
});

Answer 4

你可以使用以毫秒为间隔的fadeIn和fadeOut

$(this).fadeOut(1000, function() {
  // do something
  $(this).fadeIn(1000);
});