JQuery fadeOut on hover

77
6

Мне нужно немного помочь с jquery, чтобы получить эффект fadeOut, вот мой код:


http://jsfiddle.net/PPpnT/25/


Когда вы наводите курсор на изображение, изображение должно исчезать и показывать красное под ним, когда вы нажимаете мышь, изображение должно исчезать. Я думаю, что для кода может понадобиться функция остановки - просто с трудом записывая ее.


Приветствуем все предложения!

спросил(а) 2021-01-25T18:16:14+03:00 4 месяца, 4 недели назад
1
Решение
140

В вашем конкретном jsFiddle используйте это:


$('#show').hover(function() {
$(this).stop(true).fadeTo("slow", 0);
}, function() {
$(this).stop(true).fadeTo("slow", 1);
});​

Вы можете увидеть, как он работает здесь: http://jsfiddle.net/jfriend00/BJwn7/.

Ключи здесь: вы не можете использовать .fadeOut() и .fadeIn(), потому что, когда они закончены, они устанавливают display: none, что заставляет элемент скрываться, и это бесполезно для функции .hover(). Таким образом, вместо этого просто уменьшите непрозрачность до 0 (но зависание остается в силе), а затем, когда наведите указатель мыши, исчезнет до непрозрачности 1.


Мне также пришлось удалить непрозрачный CSS для красного блока из jsFiddle, потому что вы хотите, чтобы он был виден, когда вы исчезали из-за изображения, чтобы вы могли просто оставить его видимым за изображением.


Если вам нужен только эффект в браузере, поддерживающий переходы CSS3 (пока еще не версия IE), вы также можете сделать это без jQuery/javascript и просто использовать переходы CSS3. Но для чего-то такого же простого, как это, когда у вас уже есть jQuery, довольно легко просто использовать jQuery fades и получить поддержку кросс-браузера.

ответил(а) 2021-01-25T18:16:14+03:00 4 месяца, 4 недели назад
63

$('#show').hover(
function () {
$(this).fadeOut("slow");
},
function () {
$(this).fadeIn("slow");
}
);

ответил(а) 2021-01-25T18:16:14+03:00 4 месяца, 4 недели назад
45

Примеры с fadeOut НЕ будут работать с вашим html-кодом. Причина проста: mouseout или вторая функция hover будет запущена в конце анимации fadeOut, так как изображение получит свойство display:none. Посмотрите на мой код http://jsfiddle.net/TW232/


$('div').hover(function(){
$(this).width($('img', this).width()).height($('img', this).height());
$('img', this).stop(true,true).fadeOut('fast');
}, function(){
$('img', this).stop(true,true).fadeIn('fast');
});​

HTML:


<div>
<img id="show" src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt=""/>
</div>​

и css:


div {background:red; width:0px;}​

ответил(а) 2021-01-25T18:16:14+03:00 4 месяца, 4 недели назад
45

Вы начали с переходов CSS, вот пример, который использует это:


Я использую Firefox, поэтому пример был обновлен только для Firefox, но остальные должны быть симметричными.


Подробнее об этом читайте здесь:


Credits:


ответил(а) 2021-01-25T18:16:14+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема