jquery - fadeOut/fadeIn background image on hover

У меня есть <div>, который содержит фоновое изображение, <div> находится на панели инструментов в HTML.jquery - fadeOut/fadeIn background image on hover

HTML:

<div id="toolbar"> 
    <div class="image">&nbsp;</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"); 
});

В настоящее время логотип исчезает, а логотип наведения исчезает дважды.

Любая помощь приветствуется.

источник

2010-03-09 CLiown

Вы не можете изменить непрозрачность элемента фона, что и делает fadeIn() - вам, вероятно, нужно будет скрыть элемент и поместить его абсолютно, а затем вытереть это. –

//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 
});

источник

2010-03-09 12:03:03

часть removeClass должна быть как обратный вызов, а не обратный вызов fadeIn нового класса ... может быть случайной скобки :) ... –

Поскольку вы не можете приглушить фоновое изображение, вы можете попробовать switchClass(), которые вы можете установить таймер. Я не уверен, что вы получите чистое исчезновение и исчезнете, но вы можете получить крутой эффект морфологии.

Так что было бы что-то вроде:

$("#toolbar img:hover").switchClass("image","imagehover", "slow");

источник

2010-03-09 12:11:01 Anthony

Что такое switchClass()? – tetris

Я верю, что функция расширения от jQuery UI - http://jqueryui.com/ –

находится в ядре JQuery UI Core http://docs.jquery.com/UI/Effects/switchClass – Aaron

Там нет способа сделать плавные переходы между изображениями в 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 hover или CSS, но в любом случае вам нужно, чтобы изображения были абсолютно расположены друг над другом ,

источник

2010-03-09 12:25:33 Keith

jquery - fadeOut/fadeIn background image on hover

ответ

Смежные вопросы