jQuery动画和CSS左右
[英]Jquery animation and css right and left
问题描述
The following code is working fine on the first click (moving the left border to the middle) but on the second it does not and I cant figure why. 
下面的代码在第一次单击（将左边框移动到中间）时工作正常，但是在第二次单击上却没有效果，我无法确定原因。 I know that I can use another solution but I want to know why the right:50% is not working. 我知道我可以使用其他解决方案，但是我想知道为什么正确的50％无法正常工作。 Here is the code: 这是代码：
$(document).ready(function(){ $( "button" ).click(function(){ screenWidth = $("html").width() /2; positionLeft = Math.round($(".container").offset().left) if ( positionLeft < screenWidth) { $(".container").animate({ left: "50%" }, 1000); } else if (positionLeft == screenWidth) { $(".container").animate({ right: "50%" }, 1000); } }); });
.container{ background-color:black; height: 50%; width: 20%; position: absolute; top: 30%; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>debugging</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div class="container"></div> <button>click</button> </body> <script> </script> </html>
5 个解决方案
解决方案1
1 2015-02-21 11:39:11
You have more then one problem in your code: 您的代码中有多个问题：
This condition may not be true because of the Math.round you are using: 由于您正在使用Math.round因此该条件可能不true ：
positionLeft == screenWidth
Just use else without a condition. 无需条件即可使用else 。
You animate left at the first click, and right at the second click, but then the left and the right style are both set! 第一次单击时left动画，第二次单击时right动画，但是同时设置了left和right样式！ Either reset left and then use right , or just use one of both. 重置left ，然后使用right ，或仅使用两者之一。
Here is a jsfiddle: http://jsfiddle.net/438o3u6x/ 这是一个jsfiddle： http : //jsfiddle.net/438o3u6x/
解决方案2
0 2015-02-21 11:28:07
You have to just change this condition: 您只需要更改此条件：
$( "button" ).click(function(){
screenWidth = $("html").width() /2;
positionLeft = Math.round($(".container").offset().left)
if ( positionLeft < screenWidth) {
$(".container").animate({
left: "50%"
}, 1000);
} else if (positionLeft == screenWidth) {
$(".container").animate({
left: "0%"
}, 1000);
}
});
Change right: "50%" with left: "0%" 右移：“ 50％”，左移：“ 0％”
解决方案3
0 2015-02-21 11:30:07
$(document).ready(function(){ $( "button" ).click(function(){ screenWidth = parseInt($("html").width() /2, 10); positionLeft = Math.round($(".container").offset().left) if ( positionLeft < screenWidth) { $(".container").css({left : '0%'}).animate({ left: "50%" }, 1000); } else if (positionLeft == screenWidth) { $(".container").css({ left : 'calc(100% - 20%)'} ).animate({ left: "49%" }, 1000); } }); });
.container{ background-color:black; height: 50%; width: 20%; position: absolute; top: 30%; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>debugging</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div class="container"></div> <button>click</button> </body> <script> </script> </html>
You need a different approach to this. 您需要使用其他方法。 right doesn't seem to work. right似乎不起作用。 So first use css to set the element to 100% left, using calc as a nifty way to subtract the width of the element. 因此，首先使用css将元素设置为向左100% ，然后使用calc作为减去元素宽度的一种巧妙方法。 then return to left 49% (to reset animation from the left) which gives you the animation you want I guess? 然后返回到左侧的49% （从左侧重置动画），这给了您您想要的动画？
解决方案4
0 已采纳 2015-02-21 11:32:12
Since you are already walking in one direction, you have to turn around... 由于您已经朝一个方向行走，因此必须转身...
If you want to position an element, you can declare only the offset from "the same sides" (top-left / bottom-right). 如果要定位元素，则只能声明与“相同侧”（左上/右下）的偏移量。 Just reset the opposite with the auto -value. 只需使用auto -value重置相反的值即可。
$(document).ready(function(){ $( "button" ).click(function(){ screenWidth = $("html").width() /2; positionLeft = Math.round($(".container").offset().left) if ( positionLeft < screenWidth) { $(".container").css('right', 'auto'); $(".container").animate({ left: "50%" }, 1000); } else if (positionLeft == screenWidth) { $(".container").css('left', 'auto'); $(".container").animate({ right: "50%" }, 1000); } }); });
.container { background-color:black; height: 50%; width: 20%; position: absolute; top: 30%; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>debugging</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div class="container"></div> <button>click</button> </body> <script> </script> </html>
解决方案5
0 2015-02-21 11:44:47
For the first: use same finction for get integer values of
screenWidthandpositionLeft.对于第一个：使用相同的函数来获取screenWidth和positionLeft整数值。screenWidth|0 == Math.floor(screenWidth) Math.round(screenWidth) Math.ceil(screenWidth)
There are three variants, and you must use this one. 有三种变体，您必须使用此变体。
- And second: you can add
console.log('step1'),console.log('step2')for view result of your click function because you css solution is bad.其次：您可以添加console.log('step1')，console.log('step2')作为单击功能的查看结果，因为CSS解决方案不好。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.