Плавно изменяя фон при наведении на элемент

При поиске решения моей проблемы, я нашел ответ пользователя Arun P Johny о том, как сделать эффект изменения фонаПлавно изменяя фон при наведении на элемент

jQuery(function(){ 
    var $body = $('body'); 
    $('.menu-item-1').hover(function(){ 
     $body.css('background-image', 'url("yadayadayada.jpg")') 
    }, function() { 
     $body.css('background-image', '') 
    }) 
})

Но как сделать плавное изменение?

источник

2014-09-20 Артур Пипченко

Что вы имеете в виду под "плавным изменением"? Как увядание? –

Да, точно, когда одно фоновое изображение плавно переходит в другое –

Css переходы –

Насколько я знаю, это невозможно сделать на одном элементе без обширного (и медленного) javascripting, где вы анимируете источники изображений на пиксель. Кажется, мне плохо.

Вместо этого добавьте еще один элемент в DOM и запустите его, и вы сможете сделать это с помощью CSS-переходов. Легко и быстро.

Вот важные части CSS:

body { 
    background: url(image1.jpg); 
} 
div { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: url(image2.jpg); 
    transition: all 0.5s linear; 
} 
div:hover { 
    opacity: 0; 
}

Вот рабочий fiddle для вас.

EDIT ПОСЛЕ OP COMMENT:

Снимите селектор :hover с CSS, и изменять JS, как это:

jQuery(function(){ 
    var $div = $('div'); 
    $('.menu-item-1').hover(function(){ 
     $div.css({opactiy: 0}) 
    }, function() { 
     $div.css({opacity: 1}) 
    }) 
})

источник

2014-09-20 21:39:12

Основная идея заключается в том, что фон div должен быть изменен при наведении на другой элемент –

Ok. Нет проблем. Используйте один и тот же базовый aproach, но используйте собственный обработчик событий jQuery, чтобы вызвать переход CSS. Я отредактировал свой ответ, чтобы отразить это изменение. –

Этот div содержит еще один div, содержащий элемент наведения. Итак, если основной div имеет непрозрачность: 0, то все дочерние элементы невидимы, тоже –

В зависимости от того, как вы его создали вы могли бы сделать что-то вроде

$('.myimage').on('mouseover', function(){ 
$('.backgroundimage').fadeOut("slow",  function(){ 
complete : function() { 
$('.otherimage').fadeIn(); 
} 
}); 
});

Я на моем телефоне и не пробовал этот код, просто чтобы дать вам представление о том, с верхней части моей головы ,

источник

2014-09-20 21:16:00

Плавно изменяя фон при наведении на элемент

ответ

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