Как укоротить код jQuery
50 повідомлень
#15 років тому
Ребят, помогите, пожалуйста, укоротить этот код.Что он делает:
Есть 4 картинки. При наведении мыши на одну из них, остальные исчезают. При отведении мыши, появляются.
$(document).ready(function(){
$("#splsh_fem").hover(function(){
$("#splsh_man").stop(true, true).fadeOut();
$("#splsh_vin").stop(true, true).fadeOut();
$("#splsh_int").stop(true, true).fadeOut();
},
function(){
$("#splsh_man").stop(true, true).fadeIn();
$("#splsh_vin").stop(true, true).fadeIn();
$("#splsh_int").stop(true, true).fadeIn();
});
$("#splsh_man").hover(function(){
$("#splsh_fem").stop(true, true).fadeOut();
$("#splsh_vin").stop(true, true).fadeOut();
$("#splsh_int").stop(true, true).fadeOut();
},
function(){
$("#splsh_fem").stop(true, true).fadeIn();
$("#splsh_vin").stop(true, true).fadeIn();
$("#splsh_int").stop(true, true).fadeIn();
});
$("#splsh_vin").hover(function(){
$("#splsh_fem").stop(true, true).fadeOut();
$("#splsh_man").stop(true, true).fadeOut();
$("#splsh_int").stop(true, true).fadeOut();
},
function(){
$("#splsh_fem").stop(true, true).fadeIn();
$("#splsh_man").stop(true, true).fadeIn();
$("#splsh_int").stop(true, true).fadeIn();
});
$("#splsh_int").hover(function(){
$("#splsh_fem").stop(true, true).fadeOut();
$("#splsh_man").stop(true, true).fadeOut();
$("#splsh_vin").stop(true, true).fadeOut();
},
function(){
$("#splsh_fem").stop(true, true).fadeIn();
$("#splsh_man").stop(true, true).fadeIn();
$("#splsh_vin").stop(true, true).fadeIn();
});
});
115 повідомлень
#15 років тому
Немного фантазии, а лучше доверять JS профессионалам.var blocks = $('#block img');
blocks
.hover(function(){
blocks.stop().fadeOut();
$(this).stop().fadeIn();
}, function(){
blocks.stop().fadeIn();
});<div id="block">
<img ... />
<img ... />
<img ... />
<img ... />
</div>
50 повідомлень
#15 років тому
Этот код не будет работать, к сожалению.Специально для JS профессионалов объясняю:
у нас 4 блока: 1, 2, 3, 4 Должно быть соответственно схематично:
1.hover{
2.hide
3.hide
4.hide
}
2.hover{
1.hide
3.hide
4.hide
}
3.hover{
1.hide
2.hide
4.hide
}
4.hover{
1.hide
2.hide
3.hide
}а ваш код делает следующее (схематично)
1.hover{
1.hide
2.hide
3.hide
4.hide
}и после этого fadeIn() даже больше не срабатывает.
115 повідомлень
#15 років тому
var blocks = $('#block img');
blocks
.hover(function(){
$(this).prevAll().stop().fadeOut();
$(this).nextAll().fadeOut();
}, function(){
blocks.fadeIn();
});
<div id="block">
<img src="userpic.gif" alt="" width="100" height="100" />
<img src="userpic.gif" alt="" width="100" height="100" />
<img src="userpic.gif" alt="" width="100" height="100" />
<img src="userpic.gif" alt="" width="100" height="100" />
</div>
пригодится