Взгляните на эту ссылку http://dncminneapolis2012.com/new2
Если вы нажмете «два», она переместится на вторую страницу, и вы увидите 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);
}
});