Question

I have a roll over effect on a <h3>Some header</h3> and I want the background to fadein/fadeout nicely on hover.

its normal state is:

h3 {
background: none;
}

and the hover is a css3 animation:

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)
    );
}

since I have so many rules – I can’t do it in jQuery simple animatie (or can I?).

Can it be done without using any plugins or jQuery ui kits? Or – is it possible to achieve it in a css3 animation? I tried css3 animtation by adding to h3 this code, but it made weird effects and not at all the simple 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;
}

thanks,
Alon

Answer 1

You can do it like this with 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();
        }
   );
});