如何在悬停时使div淡出？

Question

Hi I currently have span that displays over an image on hover, however I want to use a bit of javascript or css transitions to make this div fade in to about 0.8 opacity on hover then back to 0 when the mouse is not hovering.

Here is an example of how I have it setup so far, now all thats needed is the fade and 0.8 opacity:

How its setup - Jsfiddle

Im sure there is a simple bit of code that someone has to do this

Help is much appreciated thanks!

Answer 1

So... here's the CSS3 / HTML5-way to do this. This won't work in IE though: it will fall back on the regular, immediate way (so it does work, it just isn't as smooth as it is in the real browsers).

div.yourDiv {
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
}

div.yourDiv:hover {
    opacity: 0.8;
}

Since CSS3-transitions are using hardware-accerelation, this really is very smooth! Besides that, you don't even need any Javascript or jQuery for this =)!

Answer 2

You can use CSS's :hover pseudo-class, unless you need to support IE6:

.image-hover:hover {
    opacity: .8;
}

* html .image-hover:hover { /* For IE7 and higher */
    filter: alpha(opacity=80);
}

That won't fade to 80%, though, it'll just go there immediately. To do that, you can use jQuery's hover and animate functions ( edit : or fadeTo , which is just a convenience wrapper for animate on opacity as shown below):

$(".image-hover").hover(
    function() {
        $(this).stop().animate({opacity: "0.8"});
    },
    function() {
        $(this).stop().animate({opacity: "1"});
    }
);

It's not clear from your question what the text in the span is supposed to be doing, but those are the tools to get you started.

Here's an updated version of your fiddle showing the animation; I've used 0.6 rather than 0.8 just so it's more obvious.

Answer 3

.classa
{
opacity:0.8;
}

you can addClass and removeClass like

$("div.image-hover").hover(
function(){
//fadein
$(this).addClass("classa");
},
function(){
//fadeout
    $(this).removeClass("classa");
}
);

here is the fiddle http://jsfiddle.net/2RN6E/8/

EDITED after the comment below

you can use fadeTo

$("div.image-hover").hover(
function(){
//fadein
$(this).fadeTo( "2000", "0.8");
},
function(){
//fadeout
    $(this).fadeTo( "2000","1");
}

here is the fiddle http://jsfiddle.net/2RN6E/14/ );

Answer 4

You could do:

function fadein() {
    $('.desc').animate({
        opacity: 0.8,

    }, 1000, function() {
        // Animation complete.
    })

}

function fadeout() {
    $('.desc').animate({
        opacity: 0,

    }, 1000, function() {
        // Animation complete.
    })

}

$('.image-hover').hover(fadein, fadeout);

fiddle here: http://jsfiddle.net/nicolapeluchetti/2RN6E/9/

Answer 5

This code retains the block display for the description element: http://jsfiddle.net/2RN6E/11/

It just uses the animate function of jQuery:

$(".image-hover").hover(function() {
    $(".desc").animate({opacity: '0.75'},'slow');
}, function() {
    $(".desc").animate({opacity: '0'},'slow');   
});