jQuery滑过2个div
Posted
技术标签:
【中文标题】jQuery滑过2个div【英文标题】：JQuery sliding through 2 divs 【发布时间】：2015-01-13 15:17:19 【问题描述】：我有 3 个 div 可以制作幻灯片。我想要的是能够点击一个 div 并让它循环两次。即，当单击 div #1 时，它会滚动 div #2，继续，然后在 div#3 处停止 .... 或单击 div #2 并让它平滑滚动两次并在 div #1 处停止
现在我只能让它滚动一次到下一个 div。
这里有 2 个 jsfiddle 示例，虽然我无法让它在点击时滚动 2 个 div，但只有 1 个。
http://jsfiddle.net/jtbowden/ykbgT/2/ http://jsfiddle.net/jtbowden/ykbgT/
这是我的 html：
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
</div>
和 CSS
body
padding: 0px;
#container
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
.box
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;
top: 100px;
margin-left: -25%;
#box1
background-color: green;
left: -150%;
#box2
background-color: yellow;
#box3
background-color: red;
left: 150%;
和 JS：
$('.box').click(function()
$('.box').each(function()
if ($(this).offset().left < 0)
$(this).css("left", "150%");
else if ($(this).offset().left > $('#container').width())
$(this).animate(
left: '50%',
, 500 );
else
$(this).animate(
left: '-150%',
, 500 );
);
);
【问题讨论】：
我花时间用 css 来做这件事 :) 【参考方案1】：http://jsfiddle.net/ykbgT/8195/
var anim = false; //prevent animaton before end, on more clicks
var numCycle = 2; //number of cycle, can be changed at will
$('.box').click(function ()
if (anim == false) animateD($(this), 1)
);
function animateD($d, count)
anim = true;
$d.animate(
left: '-50%'
, 500, function ()
$(this).css('left', '150%');
$(this).appendTo('#container');
);
$d2 = $d.next();
$d2.animate(
left: '50%'
, 500, function ()
if (count < numCycle)
count++;
animateD($d2, count)
else
count = 0;
anim = false;
);
【讨论】：
@MrUpsidown 双击 div 并在你的答案中观看没有 var anim 的动画 这太完美了……谢谢一百万！【参考方案2】：将动画包装在一个函数中。仅在单击事件时在下一个元素上再次调用它。
var anim = false;
$('.box').on('click', function ()
anim === false && slide($(this), true);
);
function slide(el, next)
anim = true;
el.animate(
left: '-50%'
, 500, function ()
el.css('left', '150%');
el.appendTo('#container');
);
el.next().animate(
left: '50%'
, 500, function ()
next === true ? slide($(this)) : anim = false;
);
正如@dm4web 所指出的，最好在动画发生时防止点击事件触发幻灯片。
JSFiddle demo
【讨论】：
【参考方案3】：你需要用style属性初始化一个初始状态，因为你有不同的特异性html：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="box1" style="left: -150%" class="box">Div #1</div>
<div id="box2" style="left: 50%" class="box">Div #2</div>
<div id="box3" style="left: 250%"class="box">Div #3</div>
</div>
</body>
</html>
这种情况下最好用数组来操纵js的位置：
var arr = ['-150%', '50%', '250%'],
children = $('.box'),
i = children.length,
time = true,
transition = function ()
arr.unshift(arr.pop());
while(i--)
if(parseInt(children[i].style.left) < 0)
children[i].style.left = arr[i];
else
$(children[i]).animate(
left: arr[i],
, 500, function ()
if(!time)
time = true;
transition();
);
i = children.length;
;
$('.box').click(function()
if(time)
time = false;
transition();
);
【讨论】：
以上是关于jQuery滑过2个div的主要内容，如果未能解决你的问题，请参考以下文章