Добавление плавного затухания/перехода в функцию наведения jQuery

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

<script  type='text/javascript'>
$(document).ready(function(){
    $("#l-1").hover(function() {
        $("#r-box").css("background","url('<?php bloginfo('template_directory'); ?>/images/up.png') no-repeat transparent");
            }, function() {
        $("#r-box").css("background","#3DA7BC");
    });
});
</script>

Но я стараюсь, чтобы переход был плавным и изящным, а не только вход/выход. Я пробовал различные функции .animate, чтобы заставить его работать, но безрезультатно.

Спасибо за любую помощь!


jquery background-image hover fade jquery-animate
person tigre    schedule 01.03.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете попробовать анимировать непрозрачность рассматриваемого объекта с помощью jQuery.

Мой алгоритм выглядит примерно так:


1) анимировать непрозрачность до некоторого значения, которое делает ее более прозрачной
2) в разделе обратного вызова измените фоновое изображение, используя css({key:value})
3) анимируйте непрозрачность обратно до исходного значения

$('.your-base-object').hover(function(){
        $(this).animate({opacity: '0.9'}, 300, function(){
            $(this).css({
                background: "url('path/to/your-image')"
            });
            $(this).animate({
                opacity: "1.0"
            }, 300);
        })
    }, function(){
        $(this).animate({opacity: '0.9'}, 300, function(){
            $(this).css({
                background: "url('path/to/your-image')"
            });
            $(this).animate({
                opacity: "1.0"
            }, 300);
        })
    });
person Ankur    schedule 12.07.2012

arrow_upward
0
arrow_downward

Скорее всего, вы не сможете анимировать фон такого предмета. Со страницы анимации jQuery:

Все анимированные свойства должны быть преобразованы в одно числовое значение, за исключением случаев, указанных ниже; большинство нечисловых свойств нельзя анимировать с помощью базовых функций jQuery. (Например, width, height или left можно анимировать, но background-color нельзя.) Значения свойства обрабатываются как количество пикселей, если не указано иное. Единицы em и % могут быть указаны там, где это применимо.

Я бы рекомендовал использовать другой способ отображения того, что находится на фоновом изображении. Возможно, поместите его в скрытый тег span и анимируйте его, выполнив постепенное появление или постепенное исчезновение.

person PriorityMark    schedule 01.03.2011
comment
Было бы несложно обойти это с помощью cssHooks, но что бы вы анимировали? В CSS нет прозрачности фонового изображения; некоторые браузеры поддерживают его для простых цветов фона, но здесь это не поможет. - person Tgr; 01.03.2011
comment
Один из способов, которым я думал, состоял в том, чтобы анимировать div из состояния up в состояние over, но я не знаю, как реализовать этот переход. - person tigre; 01.03.2011
comment
Возможно, если вы соберете jsfiddle с немного более полным кодом того, что вы пытаетесь выполнить, мы могли бы предоставить немного больше информации/идей? - person PriorityMark; 01.03.2011
comment
jsfiddle.net/h4Tep Это не то, как будет выглядеть конечная страница, но дает представление о настройке Сейчас у меня есть... Спасибо, Марк. - person tigre; 02.03.2011