使用jquery在一个循环中滑动div [英] Sliding div with jquery in a loop
本文介绍了使用jquery在一个循环中滑动div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的代码下面有点小狗，所以我需要你的专业解决这两个问题。我知道很多例子，但我想学习一点，也有一个更干净的代码。
My code below works a bit doggy so I need your expertises to solve these two issues. I know many examples out there but I wanted to learn a bit and also have a cleaner code.
- 滑动时，DIV项目并排出现。
- 我可以增强jQuery代码，使其循环或更动态，使其看起来更专业。如果我有100个DIV，那么就不可能处理。
- 它永远不会停止。
感谢
<html>
<style>
* { margin: 0px; padding: 0px; }
#cover { width: 100%; height: 300px; background: #CCCCCC; }
#cover div { width: 100%; height: 200px; background: #FFFFFF; }
.content { text-align: center; }
</style>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
event.preventDefault();
$('#slider_2').hide().delay(5000);
$('#slider_3').hide().delay(10000);
$('#slider_1').show('slide', { direction: 'left' }, 1000);
$('#slider_1').delay(4000).hide('slide', { direction: 'left' }, 1000);
$('#slider_2').show('slide', { direction: 'right' }, 1000);
$('#slider_2').delay(4000).hide('slide', { direction: 'right' }, 1000);
$('#slider_3').show('slide', { direction: 'left' }, 1000);
$('#slider_3').delay(4000).hide('slide', { direction: 'left' }, 1000);
});
</script>
</head>
<body>
<div id="cover">
<div id="slider_1"><p class="content">SLIDER ONE</p></div>
<div id="slider_2"><p class="content">SLIDER TWO</p></div>
<div id="slider_3"><p class="content">SLIDER THREE</p></div>
</div>
</body>
</html>
推荐答案
这些动画需要正确链接。一个元素的一切都需要出现在一个语句中：
These animations need to be chained properly. Everything for one element needs to be appear in one statement:
$('#slider_1').show(...).delay(4000).hide(...);
<在第二个语句中。
Otherwise jQuery will likely override the first animation chain (show) with the second chain (delay-hide) in the second statement.
这篇关于使用jquery在一个循环中滑动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
