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

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

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

Спасибо,

Ник


jquery css background-image fade
person Nick    schedule 30.07.2011    source источник
comment
пожалуйста, добавьте код, который вы пробовали, в вопросе. Используйте событие jquery при наведении курсора мыши, чтобы добиться эффекта.   -  person footy    schedule 30.07.2011
comment
Вы ищете пример, как это. designworks.com.pk/example/background   -  person Ahsan Rathod    schedule 30.07.2011

Ответы (3)


arrow_upward
3
arrow_downward

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

$("#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 изменяется при наведении с эффектом затухания.

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

person James Allardice    schedule 30.07.2011
comment
Спасибо, да, это свойство background-image, которое я пытаюсь изменить. Мне не нужно какое-либо исчезновение и исчезновение основного фонового изображения, поскольку фоновое изображение при наведении по существу такое же, как и основное фоновое изображение, только со стрелкой, добавленной с правой стороны. Так что, по-видимому, я могу изменить код из скрипки, на которую вы ссылаетесь, чтобы только фоновое изображение при наведении появлялось и исчезало? - person Nick; 30.07.2011
comment
Спасибо. Я вижу, что ваш код хорошо работает для затухания одного фонового изображения и одного обратно, о чем и был мой вопрос, поэтому я пометил ваш ответ как правильный. Я также ищу немного другое решение, хотя бы для простого затухания фонового изображения при наведении, которое будет отображаться за изображением переднего плана в DIV, но я задам отдельный вопрос об этом. - person Nick; 06.08.2011

arrow_upward
3
arrow_downward

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

<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);
            });
        });
    });
person Manikandan Thangaraj    schedule 30.07.2011
comment
Спасибо. Поскольку фоновое изображение при наведении такое же, как и основное фоновое изображение, с добавленной справа стрелкой, мне не нужно постепенное появление и исчезновение основного фонового изображения, просто простое исчезновение фонового изображения при наведении на наведение и исчезновение, когда курсор покидает div - person Nick; 03.08.2011

arrow_upward
0
arrow_downward

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);
        });
    })
}
person Jasdeep Khalsa    schedule 13.08.2014