好吧，所以我想练习一些 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>
最佳答案
你需要在这里使用 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');
});
});
});
});
关于javascript - jQuery滑动删除div栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18217598/