javascript jquery 动画不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15738227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery animate doesn't work
提问by Mustafa Shujaie
Hi I have a simple slider with this codes:
嗨，我有一个带有以下代码的简单滑块：
HTML Code:
HTML代码：
<div id="gallery">
<a href="#" id="left-arrow">..</a>
<a href="#" id="right-arrow">..</a>
<div id="container">
<div class="item">...</div>
<div class="item">...</div>
...
<div class="clr"></div>
</div>
</div>
CSS Styles:
CSS 样式：
#gallery {
position:relative;
width:290px;
height:200px;
overflow:hidden;
}
#gallery #container{
position:absolute;
left:0px;
top:0px;
width:1160px;
}
#right-arrow, #left-arrow{
width:30px;
height:30px;
position:absolute;
top:85px;
z-index:200;
}
#right-arrow{
right:10px;
}
#left-arrow{
left:10px;
}
JS Codes:
JS代码：
<script type="text/javascript">
$(document).ready(function(){
// I must set left position explicitly if not when fetching left position it returns "auto"
// I used position.left property, however. but It doesn't returns left relative
// to parent insted (I think) relative to document which (I don't know why? It is not
// according to Jquery documentation which position.left - .offset() is relative to document)
$('#container').css('left', '0px');
$('#right-arrow').click(function(){
move('right');
});
$('#left-arrow').click(function(){
move('left');
})
move = function (direction){
.
.
.
// The problem is here:
$('#container').animate(left:'+=290');
// although setting it's css left position doesnt work
$('#container').css('left', '290px');
// I return container to use it in console!
return $(#container');
}
});
</script>
I used console to debugging it I found that it properly sets css position to whatever I want but actually it doesn't work Take a look at:
我使用控制台调试它我发现它正确地将 css 位置设置为我想要的任何位置，但实际上它不起作用看看：
Console:
安慰：
>>> var x = move()
Object[div#container]
>>> x.css('left', '1000px')
Object[div#container]
>>> x.css('left')
"1000px"
// But It doesn't move in reality
I Hate Javascript, Please help me I don't know what is the problem
我讨厌 Javascript，请帮帮我我不知道是什么问题
回答by Dipesh Parmar
To make top, left, bottomand rightcss rules to work you need to add positioncss rule to dom.
为了使top，left，bottom和rightCSS规则工作，你需要添加positionCSS规则dom。
div
{
top:10px;
left:10px;
}
above code will not apply top and left to div but
上面的代码不会将 top 和 left 应用于 div 但
div
{
top:10px;
left:10px;
position : relative;//absolute or fixed or etc
}
above code will work.
上面的代码会起作用。
You have below errors.
您有以下错误。
Replacereturn $(#container');withreturn $('#container');
替换return $(#container');为return $('#container');
Also Replace.animate(left:'+=290');with.animate({left:'+=290'});
也替换.animate(left:'+=290');为.animate({left:'+=290'});
回答by Mustafa Shujaie
Oh my god, I found the problem. the problem was not with my code. There was another element another place with the ID of 'container'it was in a 3rd party module
sorry guys my fault!! :D
天啊，我发现问题了。问题不在于我的代码。还有另一个元素的另一个地方，'container'它的 ID是在第 3 方模块中，对不起，我的错！！:D
