试图使点击动画可重复
[英]Trying to make a click animation repeatable
问题描述
I'm trying to make a bar that slides horizontally. 
我正在尝试制作一个水平滑动的栏。 If it's positioned left, it will slide right. 如果位于左侧，它将向右滑动。 If it's positioned right, it will slide left. 如果位于右边，它将向左滑动。 Eventually this will contain multiple bars side by side that will slide out of the way to reveal different images. 最终，它将并排包含多个条，这些条会滑开以显示不同的图像。
right now it would work fine except i can't seem to figure out how to get it to fire more than once. 现在它可以正常工作，除非我似乎无法弄清楚如何使它点火一次。 I'm not a javascript guy by any stretch of the imagination, so just a little push in the right direction would be appreciated. 无论如何，我都不是一个javascript人，所以只要朝正确的方向稍加推动就可以了。
Thanks 谢谢
Luke 路加
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var x=1;
$(document).ready(function(){
if( x==1 )
{
x=2;
$("#block").click(function()
{
$("#block").animate({right:'20px'});
});
return;
}
if( x==2 )
{
x=1;
$("#block").click(function()
{
$("#block").animate({left:'20px'});
});
return;
}
});
</script>
</head>
<body>
<p> This block should slide right if it's positioned left, and slide left if it's positioned right. It should repeat this behavior indefinitely. Right now it's being very naughty indeed!</p>
<div id=block style="background:#98bf21;height:100px;width:16px;position:absolute;">
</div>
</body>
</html>
4 个解决方案
解决方案1
3 已采纳 2012-11-14 14:47:16
Bind the event out the if statment and put the condition in side event. 将事件绑定到if语句中，并将条件放入附带事件中。
$(document).ready(function(){
var x=1;
$("#block").click(function()
{
if( x==1 )
{
x=2;
$("#block").animate({right:'20px'});
}
else
{
x=1;
$("#block").animate({left:'20px'});
}
});
});
To keep the rule cycle you may need to change the code like given below 为了保持规则周期，您可能需要更改代码，如下所示
$(document).ready(function() {
var x = 1;
$("#block").click(function() {
if (x == 1) {
x = 2;
$("#block").animate({
right: '20px',
left: '0px'
});
}
else {
x = 1;
$("#block").animate({
left: '20px',
right: '0px'
});
}
});
});
解决方案2
0 2012-11-14 14:54:24
You cannot easily animate left and right , because jQuery doesn't know the exact end position when you change left: 0 to right: 0 . 你不能简单的动画left和right ，因为jQuery不知道确切的结束位置，当你改变left: 0到right: 0 。 What you can do is calculating this yourself and using left only. 您可以做的是自己计算并仅使用left 。 Some other things are: 其他一些事情是：
- Use a boolean to flip instead of a number 使用布尔值来翻转而不是数字
- Don't decide what event handler to bind, but decide what should happen when the handler is called 不决定绑定哪个事件处理程序，而是确定在调用该处理程序时应该发生什么
- Use
$(this)for the current element使用$(this)作为当前元素
http://jsfiddle.net/HZRWJ/ http://jsfiddle.net/HZRWJ/
$(document).ready(function(){
var isLeft = true;
$("#block").click(function() {
var fullWidth = $(document).width();
var elemWidth = $(this).width();
if(isLeft) {
$(this).animate({ left: fullWidth - elemWidth });
} else {
$(this).animate({ left: 0 });
}
isLeft = !isLeft;
});
});
解决方案3
0 2012-11-14 15:00:55
Does this do something similar to what you wanted? 这是否与您想要的东西类似？
$("#block").data('position', 'left');
$("#block").click(function() {
var elem = $(this);
resetElementPosition(elem);
switch (elem.data('position')) {
case 'left': elem.animate({ right: '20px' }); elem.data('position', 'right'); break;
case 'right': elem.animate({ left: '20px' }); elem.data('position', 'left'); break;
}
});
function resetElementPosition(element)
{
element.css({ 'left' : 'auto', 'right' : 'auto' });
}
解决方案4
0 2012-11-14 15:19:13
If you are going to have multiple bars it might be easier to store values in a jQuery object. 如果要使用多个条，则将值存储在jQuery对象中可能会更容易。
$(document).ready(function(){
$("#block").each( function( ) {
// associate data with each element. At the moment there should
// only be one but if this is implemented as a class there may
// be more
$(this).data("x", 0);
});
$("#block").click( function( ) {
// 0 will push it to the right as 0 => false
if( $(this).data("x") ) {
$(this).data("x", 0 );
// removing the css property allows you to use left & right
$(this).css("right","").animate({left:'20px'});
} else {
$(this).data("x", 1 );
$(this).css("left","").animate({right:'20px'});
}
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.