2010-08-07 51 views
0

看看这个链接http://dncminneapolis2012.com/new2为什么这个jQuery脚本只针对1个元素?

如果你点击“two”,它会滑动到第二页,你会看到左边的4个框。如果您将鼠标悬停在第一张图片上,则会很好地淡入其他图片。

我的问题是为什么它没有这样做的所有框?

我的HTML看起来像这样

<div class="facts" style="width: 472px; height: 130px; position: relative;" id="rec_1_box"> 
    <a href="#"><img src="images/resourceful_one.png" id="rec_1" /></a> 
    <div> 
    <a href="#"><img src="images/resourceful_one_hover.png" id="rec_1_hover" /></a> 
    </div> 
</div> 

<div class="facts" style="width: 472px; height: 130px; position: relative;" id="rec_2_box"> 
    <a href="#"><img src="images/resourceful_one.png" id="rec_2" /></a> 
    <div> 
    <a href="#"><img src="images/resourceful_one_hover.png" style="display:none;" id="rec_2_hover" /></a> 
    </div> 
</div> 

<div class="facts" style="width: 472px; height: 130px; position: relative;" id="rec_3_box"> 
    <a href="#"><img src="images/resourceful_one.png" id="rec_3" /></a> 
    <div> 
    <a href="#"><img src="images/resourceful_one_hover.png" style="display:none;" id="rec_3_hover" /></a> 
    </div> 
</div> 

<div class="facts" style="width: 472px; height: 130px; position: relative;" id="rec_4_box"> 
    <a href="#"><img src="images/resourceful_one.png" id="rec_4" /></a> 
    <div> 
    <a href="#"><img src="images/resourceful_one_hover.png" style="display:none;" id="rec_4_hover" /></a> 
    </div> 
</div> 

和我的jQuery看起来像这样

//find the div.facts elements and hook the hover event 
$('div.facts').hover(function() { 
    // on hover, find the element we want to fade up 
    var fade = $('> div', this); 

    // if the element is currently being animated (to a fadeOut)... 
    if(fade.is(':animated')) { 
    // ... take it's current opacity back to 1 
    fade.stop().fadeTo(250,1); 
    } else { 
    // fade in quickly 
    fade.fadeIn(250); 
    } 
}, function() { 
    // on hovering out, fade the element out 
    var fade = $('> div', this); 
    if(fade.is(':animated')) { 
    fade.stop().fadeTo(3000,0); 
    } else { 
    //fade away slowly 
    fade.fadeOut(250); 
    } 
}); 

回答

1

DIV的显示,但图像本身设置为显示:无。

+0

谢谢。我忘了把这些全部拿出来。 – Catfish 2010-08-07 19:22:45

+0

我用FireBug解决了这个问题。我加载了你的页面,并在控制台中输入$('div.facts)。它确实返回了4个项目。然后我检查了一个错误的div(使用Inspect Element)。当盘旋时,div的CSS确实会改变。图像仍然隐藏。当我禁用CSS行隐藏图像时,它工作。 – Sjoerd 2010-08-07 19:48:09