jquery targeting /懸停問題

我有兩個divs，懸停span class=fg增長和更改不透明度，span class=bg收縮，當你mouseout它回到原來的狀態。jquery targeting /懸停問題

我的問題是兩個部分：

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

來源

2011-07-06 Sean

你有兩個不同的'格'用相同的ID。不要使用這種方法。每個元素的ID應該是唯一的。 –

'$（「＃wrap」）。parent（）'body元素？我不確定是否粘貼了所有內容，但是如果是這樣的話，'hover'會應用到主體（即整個頁面）。 – pimvdb

的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

來源

2011-07-06 11:49:04

哇，非常感謝您的快速回答！我在'這個'上遇到了一些麻煩。我不明白爲什麼div需要嵌套在另一個div中。 – Sean

我假設你想讓每個'wrap'在盤旋時獨立工作，如果它們都嵌套在使用'$（「span.fg」，this）的同一個div中''將同時指定'Subtitle'和'Stuff ＃2'示例http://jsfiddle.net/markcoleman/3eNZK/3/ –

啊，我明白了。再次感謝你的幫助！ – Sean

不使用同一個ID爲2元素

$（「＃包裝」）父（） - 是父母，你必須使用$（「＃包裝」）元素

來源

2011-07-06 11:44:50

要使jQuery中的動畫順序化，您應該將第二個動畫函數編寫爲第一個動畫的回調函數。

這些動畫是平行的（他們都開始在同一時間）

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

但在這裏，當第一動畫完成第二動畫開始：

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

來源

2011-07-06 11:50:33

jquery targeting /懸停問題

回答

相關問題