Jquery定位/悬停问题答案

【问题标题】：Jquery targeting / Hover problemJquery定位/悬停问题
【发布时间】：2011-07-06 19:50:33
【问题描述】：

我有两个divs，悬停时span class=fg 增大并改变不透明度，span class=bg 缩小，当你mouseout 时它会恢复到原始状态。

我的问题分为两部分：

1：当悬停在第一个 div 上时，第二个会发生相同的动作。

2：悬停不限于 div，而是在鼠标在页面上移动时发生。

HTML：

<div id="wrap">
  <h2>Subtitle</h2>
    <p>
      <span class="bg">Lorem Ipsum has been the</span> 
      <a href="#"><span class="fg"> industry’s standard</span></a> 
      <span class="bg">dummy text ever</span> 
      <span class="fg">since the 1500s,</span>
      span class="bg">when an unknown printer took a galley of type and</span> 
   </p>
</div>

<div id="wrap" class="">
  <h2>Stuff #2</h2>
     <p>
       <span class="bg">Lorem Ipsum has been the</span> 
       <span class="fg"> industry’s standard</span>
       <span class="bg">dummy text ever</span> 
       <span class="fg">since the 1500s,</span>
       <span class="bg">when an unknown printer took a galley of type</span> 
    </p>
</div>

javaScript：

<script type="text/javascript">
$(document).ready(function() {

  $("#wrap").parent().hover (function () {      
  $("span.fg").animate({"opacity": 1, fontSize: '14px'}, 300);
  $("span.bg").animate({fontSize: '7px'}, 300);
 },
  function () {   
  $("span.fg").animate({"opacity": .5, fontSize: '12px'}, 100); 
  $("span.bg").animate({fontSize: '12px'}, 100);}   
 ); 
});

CSS：

body  {background: #000;color: #FFF;font-family: Helvetica, sans-serif;}
p     {font-size:12px;}
#wrap { width: 300px;
    height: 150px;
    cursor: pointer;
    margin: 30px auto;  
    overflow:hidden;
       }
a     {text-decoration:none; color:inherit;}
.bg   {color:#999; opacity: 0.4;}
.fg   {color:#999; opacity: 0.4;}

【问题讨论】：

您有两个不同的div 具有相同的ID。不要使用这种方法。每个元素的 id 应该是唯一的。
$("#wrap").parent() 是正文元素吗？我不确定您是否粘贴了所有内容，但如果是这种情况，hover 将应用于正文（即整个页面）。

标签： jquery hover proximity targeting

【解决方案1】：

id 必须是唯一的，将#wrap 更改为.wrap。同样在您的选择器中，您需要为其提供在何处找到元素的上下文，否则它将针对具有该类的每个元素。您可以通过传入this 或使用find() 来实现此目的

$(".wrap").parent().hover(function() {
    $("span.fg", this).animate({
        "opacity": 1,
        fontSize: '14px'
    }, 300);
    $("span.bg", this).animate({
        fontSize: '7px'
    }, 300);
}, function() {
    $("span.fg",this).animate({
        "opacity": .5,
        fontSize: '12px'
    }, 100);
    $("span.bg",this).animate({
        fontSize: '12px'
    }, 100);
});

这还假设父级是 <div> 而不是共享父级 <div>（例如，它们不是都嵌套在同一个父级中）

Example on jsfiddle

【讨论】：

哇，非常感谢您的快速回答！我在“这个”方面遇到了一些麻烦。我不太明白为什么 div 需要嵌套在另一个 div 中。
我假设您希望每个 wrap 在悬停时独立工作，如果它们都嵌套在同一个 div 中，使用 $("span.fg",this) 将定位 Subtitle 和 Stuff #2 示例中的项目jsfiddle.net/markcoleman/3eNZK/3
啊，我明白了。再次感谢您的帮助！

【解决方案2】：

不要对 2 个元素使用相同的 id

$("#wrap").parent() - 是父元素，你必须使用 $("#wrap") 元素

【讨论】：

【解决方案3】：

要在 jQuery 中使动画连续，您应该编写第二个动画函数作为第一个动画的回调。

这些动画是并行的（它们都同时开始）

$('#first').animate({'left':'50px'});
$('#second').animate({'left':'100px'});

但是在这里，第二个动画是在第一个动画完成后开始的：

$('#first').animate({'left':'50px'}, function(){
    $('#second').animate({'left':'100px'});
});

【讨论】：