Question

jQuery(document).ready(function(){
    $(".welcome").fadeOut(9500);
    $(".freelance").fadeIn(10000);
    $(".freelance").fadeOut(4500);
});

我希望欢迎信息缓慢地淡出，然后另一个div淡出它的位置然后fadeOut - 显然当欢迎盒不再存在时。

<header>
    <h1 class="left"><a href="index.html"></a></h1>
    <div class="left yellowbox welcome"><p>Welcome to my portfolio.</p></div>
    <div class="left greenbox freelance"><p>I am currently available for for work, contact me below.</p></div>
</header>

Answer 1

您需要将回调函数内的其他fadeIn()和fadeOut调用到第一个。 jQuery中的所有动画方法（以及许多其他方法）都允许回调：

jQuery(document).ready(function(){
    $(".welcome").fadeOut(9500,function(){
        $(".freelance").fadeIn(10000, function(){
            $(".freelance").fadeOut(4500);
        });
    });
});

这将导致.welcome首先淡出。一旦淡出，.freelance将会淡入。一旦淡入淡出，它就会淡出。

Answer 2

jQuery(document).ready(function(){
   $(".welcome").fadeOut(9500, function() {
      $(".freelance").fadeIn(500, function () {
          $(".freelance").fadeOut(4500);
      });
   });
});

Answer 3

我相信这段代码可能有效

$(".welcome").fadeOut(9500).queue(function(next) { 
    $(".freelance").fadeIn(10000).queue(function(next) {
        $(".freelance").fadeOut(4500);
    });
});

Answer 4

你可能想要.delay（）

jQuery(document).ready(function(){
    $(".welcome").delay(9000).fadeOut(9500);
    $(".freelance").delay(10000).fadeIn(10000);
    $(".freelance").delay(145000).fadeOut(4500);
});

jquery Fade在FadeOut之后的一个元素上面的div？

4 个答案: