jquery FadeIn 在 FadeOut 前一个 div 之后的一个元素？

发布于 2024-12-06 10:26:10 字数 592 浏览 2 评论 0原文

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

我希望欢迎消息慢慢淡出，然后另一个 div 淡入其位置，然后淡出 - 显然当欢迎框不再存在时。

<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>

原文

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

I want the welcome message to fadeOut slowly and then the other div to fadeIn its place and then fadeOut - obviously when the welcome box no longer exists.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

十六岁半 2024-12-13 10:26:10

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

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

这将导致 .welcome 首先淡出。淡出完成后，.freelance 将淡入。淡入完成后，它将淡出。

You need to call the additional fadeIn() and fadeOut inside of a callback function to the first one. All animation methods (and many others) in jQuery allow for callbacks:

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

This will cause .welcome to fade out first. Once it's done fading out, .freelance will fade in. Once it's done fading in, it will then fade out.

回复收藏 0 原文

没有心的人 2024-12-13 10:26:10

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

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

回复收藏 0 原文

何以畏孤独 2024-12-13 10:26:10

我相信这段代码可能有效

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

I believe that this code might work

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

回复收藏 0 原文

小巷里的女流氓 2024-12-13 10:26:10

你可能想要 .delay()

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

You probably want .delay()

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

回复收藏 0 原文

~没有更多了~