jquery animate为何我的animate移动不了图片
<head>
<script src="jquery/jquery-1.11.1.js"></script>
<style type="text/css">
.divclass
{
position:absolute;
z-index:1;
left:10%;
top:10%;
width:680px;
height:272px;
overflow:auto;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
<script>
$(document).ready(function(){
$("#button2").click(function(){
alert(1111);
$("#img1").animate({left:"680px"},100);
});
});
</script>
</head>
<body>
<div id="div1" class = "divclass">
<img id="img1" src="photo/1.jpg">
</div>
<input type="button" id="button1" value="button1">
<input type="button" id="button2" value="button2">
</body>
</html>
这是代码。。一点效果都没有，alert倒是可以弹出来 展开
2、你的样式中的left:10%是给.divclass定义的，你要用animate的话就必须换成：
$("#div1").animate({left:"680px"});
或者
$(".divclass").animate({left:"680px"});
而不是
$("#img1").animate({left:"680px"},100);
如果你一定要给#img1用animate的话，你可以把
.divclass的 position:absolute;换成position:relative; left:0;
#img1 加一个样式 position:absolute; left:10%; 效果不变
我改了可是一样没有用啊。。。
第一种改法如下：
<html>
<head>
<script src="jquery/jquery-1.11.1.js"></script>
<style type="text/css">
.divclass {
position: absolute;
z-index: 1;
left: 10%;
top: 10%;
width: 680px;
height: 272px;
overflow: auto;
overflow-x: hidden;
overflow-y: hidden;
}
</style>
<script>
$(document).ready(function(){
$("#button2").click(function(){
alert("1111");
$("div1").animate({left:"680px"},100);
});
});
</script>
</head>
<body>
<div id="div1" class = "divclass"> <img id="img1" src="photo/1.jpg"> </div>
<input type="button" id="button1" value="button1">
<input type="button" id="button2" value="button2">
</body>
</html>
你查看一下浏览器的console，看看有没有报错信息，我之前有在我电脑上测试过的，应该不会出问题。
如果alert不输出“1111”，说明你的插件库有问题；
你看看插件库的路径有没有错，还有一种情况，有可能是$符号的问题，把js换成以下代码：
<script>
jQuery(document).ready(function($){
$("#button2").click(function(){
alert("1111");
$("#div1").animate({left:"680px"},100);
});
});
</script>
第二种改法见附件，很忙没来的检查，就这么个意思。
