Jquery меняет изображение при опрокидывании с исчезновением

В настоящее время я использую скрипт ниже, чтобы изменить изображение при ролловере. Есть много изображений, к которым нужно применить этот эффект — у каждого изображения есть собственное изображение ролловера. Скрипт работает для ролловера, но не для затухания.

Я читал об использовании CSS и jquery для эффекта затухания: http://jqueryfordesigners.com/image-cross-fade-transition/

Но было бы очень утомительно писать CSS для более чем 100 разных изображений! Мне просто интересно, знает ли кто-нибудь, что я делаю неправильно и как заставить работать скрипт? :)

$(function () {
$("img.rollover").hover(function () {
    this.src = this.src.replace("_off", "_on")
}, function () {
    this.src = this.src.replace("_on", "_off")
})
});


$("a img").hover(function () {
    jQuery(this).stop().fadeTo("fast", 0.5);
}, function () {
    jQuery(this).stop().fadeTo("fast", 1);
});

image jquery rollover fade
person Jess    schedule 31.10.2011    source источник
comment
Для чего это стоит, это выглядит хорошо для меня.   -  person Craig    schedule 31.10.2011
comment
Было бы полезно, если бы вы также предоставили образец своего HTML (по крайней мере два, если изображения вы хотите заменить и исчезнуть).   -  person Blazemonger    schedule 31.10.2011
comment
Может быть, событие наведения на исчезновение происходит до события наведения на замену src? Почему вы используете 2 разных селектора CSS? Может быть, попробовать использовать один и тот же селектор (например, img.rollover) для назначения обоих событий? Или вы можете сделать все в одном и том же определении события наведения?   -  person Upgradingdave    schedule 31.10.2011

Ответы (1)


arrow_upward
2
arrow_downward

Вместо того, чтобы писать CSS для более чем 100 различных изображений, почему бы не использовать цикл jQuery .each, чтобы добавить CSS для вас?

$("img.rollover").each(function() {
    this.css('background-image',this.src.replace("_off", "_on"));
});

...а затем следуйте методике с одним изображением со страницы, на которую вы ссылаетесь.

person Blazemonger    schedule 31.10.2011