Opazität auf einem div schweben

Question

Bisher habe ich diesen Code bekam

http://jsfiddle.net/Nq79H/1/

aber ich möchte das Bild, um nur den Text sichtbar zu verlassen, um Fadeout. Muss ich das Javascript ändern oder ein neues CSS div schreiben?

$('.text').hide().removeClass('text').addClass('text-js'); 

$('.thumb').hover(function(){ 
    $(this).find('.text-js').fadeToggle(); 
}); 

Answer 1

... aber ich mag das Bild, um nur den Text sichtbar zu verlassen, um Fadeout.

Fügen Sie einfach .fadeToggle() zum img Element auch:

$('img', this).fadeToggle(); 

JSFiddle example.

Answer 2

Wenn Sie fadeIn Text und fadeOut Bild wollen, fügen Sie einfach eine weitere Zeile:

$('.text').hide().removeClass('text').addClass('text-js'); 

$('.thumb').hover(function(){ 
    $(this).find('.text-js').fadeToggle(); 
    $(this).children("img").fadeToggle(); 
}); 

Answer 3

$(this).find('img').fadeToggle(); 

Answer 4

Ist das, was Sie suchen?

$('.thumb').hover(function(){ 
$(this) 
    .find('.text-js') 
     .fadeToggle() 
    .end() 
    .find('img') 
     .fadeToggle(); 
}); 

http://jsfiddle.net/Nq79H/4/

Answer 5

Kein JS oder zusätzliche HTML benötigt.

http://jsfiddle.net/Nq79H/11

.thumb img { 
    -moz-transition: opacity .8s; 
    -webkit-transition: opacity .8s; 
    transition: opacity .8s; 
} 
.thumb:hover img { 
    opacity: 0; 
} 

Answer 6

Hier ist die CSS3 Übergangslösung:

jsFiddle

CSS

.thumb .text { 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: #999; 
    background: rgba(0, 0, 0, 0.3); 
    text-align: center; 
    -webkit-transition:opacity .5s ease; 
    -moz-transition:opacity .5s ease; 
    transition:opacity .5s ease; 
    opacity:0; 
} 
.thumb:hover .text { 
    opacity:1; 
} 

.thumb img { 
    opacity:1; 
    -webkit-transition:opacity .5s ease; 
    -moz-transition:opacity .5s ease; 
    transition:opacity .5s ease; 
} 
.thumb:hover img { 
    opacity:0; 
} 

Unterstützung

Die Unterstützung für CSS3-Übergänge ist jetzt ziemlich anständig, die neuesten Versionen aller gängigen Browser (Safari, Chrome, Opera, Firefox) unterstützen alle Übergänge. IE dagegen unterstützt es nur von Version 10. Übergänge sind schön, obwohl sie nicht abstürzen und brennen, wenn etwas sie nicht unterstützt. Die Deckkraft des Elements wird sich immer noch ändern, es wird einfach keinen Übergang geben.

Referenzen

• Caniuse.com transitions