animation simultanée et fadeOut

Question

http://jsfiddle.net/AndyMP/UpLts/1/

Ceci est juste un exemple à titre d'exemple, mais ce que je veux faire est d'animer une boîte et fade simultanément. Ce que j'ai pour autant que vous pouvez voir dans l'exemple, c'est une animation suivie rapidement par le fondu. Puis-je le faire disparaître pendant qu'il s'anime?

Answer 1

Maintenant, vous utilisez "animer" et "fadeTo", mais vous pouvez tout faire avec "animer". En d'autres termes, vous pouvez "animer" plusieurs propriétés de votre objet avec la fonction "animer". Donc, utilisez: box.stop(true, true).delay(100).animate({top:-0, opacity: 0},150); à la place.

Answer 2

Vous pouvez modifier le opacity des éléments:

c.mouseenter(function(){ 
    box.stop(true, true).delay(100).animate({top:-0, opacity: 0}, 150) 
}) 
.mouseleave(function(){ 
    box.stop(true, true).delay(100).animate({top:40, opacity: 1}, 150) 
}); 

Answer 3

Si vous êtes ouvert à des solutions CSS, vous pouvez le faire sans JS - http://jsfiddle.net/UpLts/2/

.blocks { 
    position: relative; 
    float: left; 
    margin: 20px; 
    width: 100px; 
    height: 100px; 
    border: 1px dotted #333; 
    overflow: hidden; 
} 

.blocks_title { 
    position: relative; 
    width: 20px; 
    height: 20px; 
    top: 40px; 
    left: 40px; 
    background: #333; 
    opacity: 1; 
    -webkit-transition: all .25s; 
     -moz-transition: all .25s; 
      transition: all .25s; 
} 

.blocks:hover .blocks_title { 
    top: 0; 
    opacity: 0; 
}