jQuery - фоновое изображение постепенного исчезновения/постепенного появления на парении
У меня есть a <div> который содержит фоновое изображение, <div> находится в панели инструментов на HTML.
HTML:
<div id="toolbar">
<div class="image"> </div>
</div>
CSS:
#toolbar .image {
background url('images/logo.png') no-repeat top left;
}
#toolbar .imagehover {
background url('images/logoHover.png') no-repeat top left;
}
Когда мышь колеблется #toolbar Я хочу фоновое изображение .image измениться, но использование .fadeOut() и .fadeIn()
До сих пор я имею:
$("#toolbar").hover(function () {
$(".image").fadeOut("slow");
$(".image").addClass("imagehover");
$(".imagehover").fadeIn("slow");
},
function () {
$(this).removeClass("imagehover");
});
В настоящее время логотип постепенно исчезает, и логотип при наведении курсора постепенно появляется дважды.
Любая справка ценится.
3 ответа
//Use the fad in out callback
$("#toolbar").hover(function () {
$(".image").fadeOut("slow", function () {
$(this).addClass("imagehover").fadeIn("slow", function () {
$(this).removeClass("imagehover");
});
});
});
//or you can use animate
$("#toolbar").animate({
"class": "imagehover"
}, "slow", 'easein', function () {
//do what every you want
});
Поскольку вы не можете затемнить фоновое изображение, вы можете попробовать switchClass () , который можно установить на таймер. Я не уверен, что вы получите чистое затухание и плавное появление, но вы можете получить классный эффект морфинга.
Это будет примерно так:
$("#toolbar img:hover").switchClass("image","imagehover", "slow");
В jQuery нет способа делать плавные переходы между изображениями - он не умеет переводить между одним изображением и другим. Вы можете делать цветовые переходы с помощью плагина.
Вы можете сделать это с помощью переходов CSS. Вы можете использовать переходы только для значений, установленных в CSS, и они еще не во всех браузерах:
/* faded out logo class */
.faded-logo {
opacity: 0.30; /* FX, Safari, GC, Opera, decent browsers */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8 */
filter: alpha(opacity=30); /* IE */
background: url('images/logo.png') no-repeat top left;
/* in Safari, FX and Chrome add a fade transition */
-webkit-transition: opacity .25s linear .1s;
transition: opacity .25s linear .1s;
}
/* no opacity on hover */
.faded-logo:hover {
opacity: 1; /* FX, Safari, GC, Opera, decent browsers */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
filter: alpha(opacity=100); /* IE */
}
Это будет иметь довольно заметный эффект затухания при наведении курсора мыши, изменение непрозрачности по-прежнему будет происходить в IE, но без перехода затухания.
Другой вариант - постепенное появление и исчезновение изображений друг над другом - вы можете сделать это с помощью событий зависания jQuery или CSS, но в любом случае вам нужно, чтобы изображения были абсолютно расположены друг над другом.