1

我有两个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>

脚本：

<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;}
4

3 回答 3

2

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);
});

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

jsfiddle 上的示例

于 2011-07-06T11:49:04.873 回答
0

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

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

于 2011-07-06T11:44:50.610 回答
0

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

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

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

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

$('#first').animate({'left':'50px'}, function(){
    $('#second').animate({'left':'100px'});
});
于 2011-07-06T11:50:33.093 回答