Question

我正在尝试让这个启动页面淡入，然后淡出。然而，它正在消失，不会消失。

以下是代码：

    <script type="text/javascript">
    $(document).ready(function(){
$('.all').hide(); 
$('#surprisesplash').fadeIn(1500)
});
$(function(){
   setTimeout(function() {
     $('#surprisesplash').fadeOut(1000, function() {
     $('.all').fadeIn();
  });
 }, 3000);
});
</script>

这是website.

我对此非常陌生，并且还在掌握。任何语法或任何类似的帮助也将不胜感激。

汤姆：）

这是css

#surprisesplash {

    width:850px;
    height:621px;
    left:50%;
    top:50%;
    margin-top:-310.5px;
    margin-left:-425px;
    position:fixed;

    }

.all {
    display:none;

    }

HTML：

  <div id="surprisesplash"><img src="/surprise2.png"></div>

    <div class ="all">

    <div id = "header">
        <div id = "music">Camelot</div>         
        <div id = "about"><a href="#">About</a></div>
        <div id = "contact"><a href="#">Contact</a></div>
        </div>
        <div id = "musicinfo">

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
        Donec eu libero sit amet quam egestas semper. 
        Aenean ultricies mi vitae est. 
        Mauris placerat eleifend leo.</p></div>

        <div id = "aboutinfo">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
        Donec eu libero sit amet quam egestas semper. </p></div>

            <div id = "contactinfo">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Vestibulum tortor quam, feugiat vitae, ultricies eget. </p></div>

        </div>

Answer 1

它应该工作！

<script type="text/javascript">

    $('.all').hide();
    $('#surprisesplash').fadeIn(1500);

    setTimeout(function() {

        $('#surprisesplash').fadeOut(1000, function() {
            $('.all').fadeIn(1500);    
        });

    }, 3000);

    </script>

<强> JsFiddle

Answer 2

你应该至少等到它开始逐渐淡出之后才开始淡出：

<script type="text/javascript">
    $(function(){
        $('.all').hide(); 
        $('#suprisesplash').fadeIn(1500, function() {
            $(this).delay(1500).fadeOut(1000, function() {
                $('.all').fadeIn();                     
            });
        });
    });
</script>

Jquery飞溅不会消失 - 但正逐渐淡出

2 个答案: