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

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

0 голосов
/ 01 марта 2011

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

<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 функции, чтобы заставить его работать безрезультатно.

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

Ответы [ 2 ]

1 голос
/ 12 июля 2012

Вы можете попробовать анимировать непрозрачность рассматриваемого объекта, используя 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);
        })
    });
0 голосов
/ 01 марта 2011

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

Все анимированные свойства должны быть анимированные на одно числовое значение, за исключением случаев, указанных ниже; большинство свойств нечисловые не могут быть анимированные с использованием базового JQuery функциональность. (Например, ширина, Высота или слева может быть анимирована, но Цвет фона не может быть.) Свойство значения рассматриваются как число пикселей, если не указано иное. единицы em и% можно указать где применимо.

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

...