同时动画和淡出

Question

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

这仅仅是用于说明目的的例子，但我想要做的是动画一个盒子，同时淡化它。在这个例子中，我所看到的是一个动画，然后是淡入淡出。当它动画时，我可以让它褪色吗？

Answer 1

现在您正在使用“animate”和“fadeTo”，但您可以使用“animate”完成所有操作。换句话说，你可以用“animate”函数“动画”你的对象的多个属性。 因此，请使用：box.stop(true, true).delay(100).animate({top:-0, opacity: 0},150);。

Answer 2

您可以更改元素的opacity：

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

如果你打开CSS解决方案，您可以不用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; 
}