JQuery исчезают при наведении

Question

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

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

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

Все предложения приветствуются!

Answer 1

В вашем конкретном 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-фейды и получить поддержку кросс-браузера.

Answer 2

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

Answer 3

Примеры с 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;}​

Answer 4

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

• http://jsfiddle.net/PPpnT/33/

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

Подробнее об этом здесь:

• http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

Кредиты:

• Переход CSS Webkit - постепенно исчезает, чем исчезает