0

好的，所以我想练习一些 jQuery，然后我想我会制作 Jay-Z 在他的新专辑广告中使用的动画，他的名字上有一个横条，它向左滑动，同时也消失了。最重要的是，我希望文本淡出、淡入，然后再次淡出，在它消失之前给它一个闪烁的效果。有人可以帮我解决这个问题吗：l，我完成了布局，但是 jQuery 无法正常工作..

<!DOCTYPE html>
<html lang="en">
<head>
<title>Magna Carta</title>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('#bar').delay(800).css('padding-left', 0+'px');
        $('#main p').fadeOut('slow' function(){
            $('#main p').fadeIn('slow' function(){
                $('#main p').fadeOut('slow');
            });
        });
    });
</script>

<style type="text/css">
body {
    background-color:#f2f2f2;
    margin:0px;
    padding:0px;
}

#main {
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-150px 0 0 -150px;
    text-align:center;
}

#main p {
    font-family:Admisi Display SSi;
    font-size:64px;
}

#bar {
    padding-left:180px;
    height:25px;
    background-color:black;
    position:absolute;
    z-index:2;
    margin-top:87px;
    margin-left:61px;
}
</style>
</head>
<body>
     <div id="main">
         <center>
             <div id="bar"></div>
         </center>
         <p>JAY-Z</p>
     </div>
</body>
</html>
4

1 回答 1

0

您需要在此处使用 animate 函数（在您刚刚将 padding-left 设置为 0 之前，这会立即发生）并且您必须修复您的 fadeOut 和 fadeIn 回调函数：

 $(document).ready(function () {
        $('#bar').delay(800).animate({
            'padding-left':0
        }, 1000, function () {
            // Animation complete.
            $('#bar').delay(800).css('padding-left', 0 + 'px');
            $('#main p').fadeOut('slow', function () {
                $('#main p').fadeIn('slow', function () {
                    $('#main p').fadeOut('slow');
                });
            });
        });
    });

演示：http: //jsfiddle.net/BjBry/1/

于 2013-08-13T19:45:12.600 回答