0

我在这里尝试的是悬停，div id 放大有一个小动画 - 动画正在工作 - 但它一次不能工作超过一个 div。如果我偶然这样做不正确，请寻求一些指导。

jQuery

<script type="text/javascript">
$(document).ready(function(){
$("#project-holder").hover(function(){
    $(".client"+$(this).attr("client")).stop().animate({'margin-left': '130px', 'margin-top': '80px'}, 500);
  }, function(){
    $(".client"+$(this).attr("client")).stop().animate({'margin-left': '-200px'}, 500);
  });
});
</script>

div 的一个例子是：

<div id="project-holder" client="1">
  <div id="magnify" class="client1">
    <img src="magnify.png">
  </div>
</div>
4

2 回答 2

3

更改您的 HTML 以改用类。id 是唯一的，同一个 id 不能多次使用：

<div class="project-holder">
  <div class="magnify client">
    <img src="magnify.png">
  </div>
</div>

Now, you can change your JS to this and it should work just fine:

$(document).ready(function(){
  $(".project-holder").hover(function(){
    $(this).find('.client').stop().animate({'margin-left': '130px', 'margin-top': '80px'}, 500);
  }, function(){
    $(this).find('.client').stop().animate({'margin-left': '-200px'}, 500);
  });
});
于 2012-12-10T22:09:19.053 回答
2

它一次不能用于多个，因为$(this)选择器指的是一个唯一的元素，而不是一个类或多个 id。您需要each()一次遍历所有 div。此外，您不应该两次使用相同的 id - 给他们一个类，并使用它each()来遍历每个 div，应用您想要的代码。

于 2012-12-10T22:07:18.687 回答