Есть ли способ анимировать парящий класс в jquery без использования плагинов / комплектов пользовательского интерфейса?

Question

У меня есть эффект наведения на <h3>Some header</h3>, и я хочу, чтобы фон плавно исчезал / исчезал при наведении.

его нормальное состояние:

h3 {
background: none;
}

и наведениетакое анимация css3:

h3:hover {
    background-image: linear-gradient(bottom, #FFFFFF 25%, #FCFCFC 100%);
    background-image: -o-linear-gradient(bottom, #FFFFFF 25%, #FCFCFC 100%);
    background-image: -moz-linear-gradient(bottom, #FFFFFF 25%, #FCFCFC 100%);
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 25%, #FCFCFC 100%);
    background-image: -ms-linear-gradient(bottom, #FFFFFF 25%, #FCFCFC 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, #FFFFFF),
        color-stop(1, #FCFCFC)
    );
}

, поскольку у меня так много правил - я не могу сделать это в простой анимации jQuery (или могу ли я?).

Можно ли это сделать без использованиякакие-либо плагины или JQuery UI комплекты?Или - возможно ли добиться этого в анимации css3?Я попробовал анимировать css3, добавив к h3 этот код, но он произвел странные эффекты и совсем не прост: fadein:

h3 {
-webkit-transition: all 0.1s ease-out;  /* Saf3.2+, Chrome */
-moz-transition: all 0.3s ease-out;  /* FF4+ */
-ms-transition: all 0.3s ease-out;  /* IE10? */
-o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
transition: all 0.3s ease-out;
}

спасибо, Алон

Answer 1

Вы можете сделать это как это с помощью jQuery.

CSS:

h3 {
    margin: 10px;
}
div.h3_bg {
    background: linear-gradient(bottom, #FF0000 25%, #FCFCFC 100%);
    background: -o-linear-gradient(bottom, #FF0000 25%, #FCFCFC 100%);
    background: -moz-linear-gradient(bottom, #FF0000 25%, #FCFCFC 100%);
    background: -webkit-linear-gradient(bottom, #FF0000 25%, #FCFCFC 100%);
    background: -ms-linear-gradient(bottom, #FF0000 25%, #FCFCFC 100%);
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, #FF0000),
        color-stop(1, #FCFCFC)
    );
}

JavaScript:

$("h3").each(function() {
    $("body")
        .append(
            $('<div>', {class:"h3_bg"})
                .width($(this).outerWidth())
                .height($(this).outerHeight())
                .hide()
                .css({
                    position: "absolute",
                    top: $(this).offset().top,
                    left: $(this).offset().left,
                    zIndex: -1
                })
        );
    $(this).hover(
        function() {
            $("div.h3_bg").eq($(this).index()).fadeIn();
        },
        function() {
            $("div.h3_bg").eq($(this).index()).fadeOut();
        }
   );
});

Answer 2

Это также можно сделать на чистом CSS2.1 + CSS3 без jQuery.

http://cssdesk.com/MGyKp

Верх без дополнительной разметки, низ с дополнительным пролетом. К сожалению, в Safari он работает не очень хорошо, а в Firefox - отлично.

Для кросс-браузерного решения лучше всего подходит решение jQuery в этой теме.

Answer 3

Я бы создал 2 заголовка, 1 с фоном, 1 без.Исчезновение между 2 с помощью jQuery.Будет работать со всеми браузерами afaik.

Вы можете передать несколько атрибутов в функцию анимации jQuery (http://api.jquery.com/animate/). Не уверен, что вы можете анимировать прозрачность для градиентных фонов?