Question

<script type="text/javascript"> 
jQuery(".font1").click(function(){
  jQuery(".div21").animate({"right": "+=200px"}, "slow");
});
</script>
<a href="#" class="click">
<div class="div11" style="float:left;">
<h1 class="font1" style="z-index:5;">text1</h1>
<div class="div12">
<div class="div13"> 
<img src="img1.jpg">
<b class="effect" style="z-index:10;"></b>
</div>
</div>
</div>
</a>
<a href="#" class="click">
<div class="div21" style="float:right;">
<h1 class="font2" style="z-index:5;">text2</h1>
<div class="div22">
<div class="div23">
<img src="img2.jpg">
<b class="effect" style="z-index:10;"></b>
</div>
</div>
</div>

我需要一个jquery动画。当我点击img1.jpg时，img2.jpg将动画200px，但我有太多的div和其他html元素，我尝试了很多次，它也失败了。怎么写得正确？

PS： H1，字体位于图像的顶部，而b class =“effect”是一些淡化效果，它应该是所有的最顶层。

Answer 1

你需要添加位置：相对于div21的style属性，以便为'right'值设置动画。

<div class="div21" style="float:right; position:relative;">

或者，您也可以将位置设置为绝对值，将右侧值设置为0。

<div class="div21" style="position:absolute; right: 0;">

此外，如果永远不会调用事件处理程序，请尝试将绑定函数包装在匿名函数中并将其传递给jQuery，以便在加载jQuery后调用它。

jQuery(function() {
    jQuery(".font1").click(function() {
    ...
    });
});

另外请注意，您在示例末尾缺少结束锚标记</a>。

如何在这种情况下编写jQuery动画？

1 个答案: