Jquery完成动画回调

时间:2015-06-01 14:21:04

标签: javascript jquery html

是的,因为标题表示,即使代码的其余部分确实存在,我仍然无法完成#徽标侧不透明度更改,我认为它需要完整添加到函数但不确定在哪里..有人可以帮忙吗?

$(document).ready(function () {
    setTimeout(function () {
        $("#loader-wrapper .loader-section, #textbit").hide("slow");
        $("#logo").animate({
            left: '-115px',
            top: '-60%'
        }, 'slow',
        function () {
            $("#logo-side").animate({
                opacity: 1
            }, 5000);
        });

        $("#wrapper").unwrap();
    }, 2000);
});

HTML CODE ON REQUEST

<div id="loader-wrapper">
    <div id="wrapper">
        <div id="logo"><a href="index.html">
            <img src="images/mthc/logo-main.png" height="130px" width="420px"></a></div>
        <div id="textbit" class="text">
            <p>
                <span class="word one"></span>
                <span class="word one">Music</span>
                <span class="word two">Expression</span>
                <span class="word three">People</span>
                <span class="word four">Potential</span>
            </p>
        </div>
    </div>

    <div class="loader-section"></div>
</div>


 <div id="logo-side" class="tile-area-title"><img src="images/mthc/logo-main2.png" height="130px" width="380px"></div>

2 个答案:

答案 0 :(得分:3)

你需要这样的东西:

$(document).ready(function() {
     setTimeout(function() {
        $("#loader-wrapper .loader-section, #textbit").hide("slow");

        $("#logo").animate({
             left: '-115px',
             top: '-60%'
           },
           {
             easing: 'slow',
             complete: function(){
               $("#logo-side").animate({
                 opacity: 1
               }, 5000);
             },
             duration: 2000
           }
        });

      $("#wrapper").unwrap();
    }, 2000);
});

未经测试。

答案 1 :(得分:0)

看来#logo-side opacity未设置为0 css

$(document).ready(function() {
     setTimeout(function() {
        $("#loader-wrapper .loader-section, #textbit").hide("slow");
        $("#logo").animate({
          left: '-115px',
          top: '-60%'
        },'slow',
        function(){
           $("#logo-side").animate({
           opacity: 1
           }, 5000, function() {
             // load, initialize `multipushmenu` , or other `plugin` here,
             // to insure animation to opacity ` completed;
             // e.g.; 
             // $.getScript("/path/to/plugin/plugin.js")
           });
       });

       $("#wrapper").unwrap();
    }, 2000);
 });
#logo-side {
  opacity:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="loader-wrapper">
    <div id="wrapper">
        <div id="logo"><a href="index.html">
            <img src="http://lorempixel.com/420/130/technics" height="130px" width="420px"></a></div>
        <div id="textbit" class="text">
            <p>
                <span class="word one"></span>
                <span class="word one">Music</span>
                <span class="word two">Expression</span>
                <span class="word three">People</span>
                <span class="word four">Potential</span>
            </p>
        </div>
    </div>

    <div class="loader-section"></div>
</div>


 <div id="logo-side" class="tile-area-title"><img src="http://lorempixel.com/380/130/nature" height="130px" width="380px"></div>