Question

好的，所以我想练习一些jQuery，为了做到这一点，我想我会制作Jay-Z在他的新专辑广告中使用的动画，他的名字上有一个栏，它向左滑动同时也消失了。最重要的是，我想要文本fadeOut，fadeIn，然后fadeOut再次在它消失之前给它一个闪烁效果。有人可以帮我解决这个问题：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>

Answer 1

你需要在这里使用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/

jQuery滑动删除div栏

1 个答案: