jQuery的动画帮助

Question

我有以下代码：

<div id="container"> 

<div class="nameContainer"> 
    <p class="daniel">Daniel</p> 
    <p class="james">James</p> 
    <p class="david">David</p> 
    <p class="morrison">Morrison</p> 
</div> 

<script type="text/javascript"> 

    if (!Modernizr.csstransitions) { 

     $('.daniel').hover(function() { 
     $('.daniel').animate({ 
      opacity: 0.25, 
      }, 1000, function() { 
      // Animation complete. 
      }); 
     }); 

    } 

</script> 

因此，这应该使它所以当你将鼠标悬停在“丹尼尔”的文字，它应该在不透明度降低到0.25。然而，当使用IE浏览器（因为它不支持csstransitions，所以我不得不使用modernizr和一些jquery来工作），它只会崩溃整个IE并拒绝做任何事情。现在，如果我将jQuery代码更改为：

<div id="container"> 

<div class="nameContainer"> 
    <p class="daniel">Daniel</p> 
    <p class="james">James</p> 
    <p class="david">David</p> 
    <p class="morrison">Morrison</p> 
</div> 

<script type="text/javascript"> 

    if (!Modernizr.csstransitions) { 

     $('.nameContainer').hover(function() { 
     $('.nameContainer').animate({ 
      opacity: 0.25, 
      }, 1000, function() { 
      // Animation complete. 
      }); 
     }); 

    } 

</script> 

它会很好地工作..所有的文本都会改变不透明度。然而这不是我想要的;我想要它，所以当你将鼠标悬停在一个单词上时，它会改变不透明度。

这里有一个现场演示：http://mozazdesign.co.cc/newlogo2/

任何帮助将是巨大的..谢谢！

Answer 1

您需要处理该事件在<div>的<p>元素，那么动画这是徘徊的元素：

$('.nameContainer p').hover(function() { 
    $(this).animate({ 
     opacity: 0.25, 
     }, 1000, function() { 
     // Animation complete. 
     }); 
});