我的代码中有两个 div
标签。一个 div
包含一个 200 x 200 尺寸的图像。另一个 div
不包含任何内容。我想将此 200 x 200 图像动画化为 30 x 30 图像的空 div
。我写了代码,但它不起作用。甚至,它在 Firebug 中也没有显示任何错误。谁能帮帮我??
HTML
<div>
<img class="userimage" src="images/TF-NKWS-003.png" height="200" width="200" />
</div>
<input type="button" value="Click me to amimate" class="animationButton" />
<br><br><br><br><br><br><br><br>
<div class="addImg">
</div>
Javascript
<script type="text/javascript">
$(".animationButton").click(function(){
$(this).find(".userimage").animate({
left:$(".addImg").offset().left,
top:$(".addImg").offset().top,
width:30,
height:30
}, 1000, function(){
$(".addImg").append("<img src='images/TF-NKWS-003.png' />");
});
});
</script>
提前致谢
最佳答案
那是因为你的选择器是错误的。您的图片不在按钮内。 像这样尝试:
<script type="text/javascript">
$(".animationButton").click(function(){
$(".userimage").animate({
left:$(".addImg").offset().left,
top:$(".addImg").offset().top,
width:30,
height:30
},1000,function(){
$(".addImg").append("<img src='images/TF-NKWS-003.png' />");
});
});
</script>
您的选择器 $(this).find('.userimage')
正在寻找 userimage
在$(this)
里面(.animationButton
)。
您的脚本还制作了图像的副本,我不知道那是不是您想要的,如果不是您应该替换 $(".addImg").append("<img src='images/TF-NKWS-003.png' />");
与 $(this).appendTo(".addImg");
.将原始图像附加到 div。
关于javascript - 将图像从一个 div 动画化到另一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18247736/