Добавление плавного перехода к фоновому изображению при наведении

Question

У меня есть простая навигационная система в боковой панели на странице, которую вы можете увидеть здесь .

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

Спасибо

Ник

Answer 1

Используйте следующие коды:

<div id="someElement" style="background:url('2.jpg');width:100px;height:100px;">
</div>
     $(document).ready(function(){ 
        $("#someElement").hover(function() {
            $(this).stop().fadeOut("1000", function() {
                $(this).css("background", "url('1.jpg')").fadeIn(1000);
            });
        }, function() {
            $(this).stop().fadeOut("1000", function() {
                $(this).css("background", "url('2.jpg')").fadeIn(1000);
            });
        });
    });

Answer 2

Трудно сказать, что вы пытаетесь сделать без какого-либо пояснения или примера кода, но вы ищете что-то вроде этого ?

$("#someElement").hover(function() {
    $(this).stop().fadeOut("1000", function() {
       $(this).attr("src", "anotherImage.png").fadeIn(1000);
    }); 
}, function() {
    $(this).stop().fadeOut("1000", function() {
       $(this).attr("src", "firstImage.png").fadeIn(1000);
    }); 
});

В этом примере #someElement относится к элементу img. Атрибут src изменяется при наведении, с эффектом затухания.

Редактировать - перечитав ваш вопрос, я думаю, вы захотите изменить свойство background-image CSS, а не src элемента img. Если это так, взгляните на этот пример . Все, что действительно изменилось, - это заменить функцию jQuery attr на css.

Answer 3

HTML

Это HTML-элемент, который будет иметь изображение на заднем плане:

<div class="image"></div>

CSS

Мы определяем два класса CSS.По умолчанию один для элемента, который содержит image1.jpg и второй класс, который содержит image2.jpg:

.image {
    width: 1000px; /* Image width */
    height: 500px; /* Image height */
    background: url('../images/image1.jpg') no-repeat; /* First image */
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "../images/image1.jpg", sizingMethod = 'scale');
    background-size: 100% 100%;
    background-position: center;
}
.image.image-2 {
    background: url('../images/image2.jpg') no-repeat;  /* Second image */
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "../images/image2.jpg", sizingMethod = 'scale');
    background-size: 100% 100%;
    background-position: center;
}

JavaScript

JavaScript использует обратные вызовы / обещания дляубедитесь, что каждый переход происходит в правильной последовательности:

var elem = $('.image'); // Define the element
elem.hover(toggleImage); // When hovering over the element, run the toggleImage function

function toggleImage() {
    // Fade out 0.5 secs, toggle image class, fade in 0.5 secs
    elem.fadeOut(500, function(){
        elem.toggleClass('image-2').promise().done(function(){
            elem.fadeIn(500);
        });
    })
}