jquery - アニメーションとフェードアウトの同時実行

Question

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

これは説明のための単なる例ですが、私がやりたいことは、ボックスのアニメーション化とフェードアウトを同時に行うことです。例でわかるように、これまでのところ、アニメーションの直後にフェードが続きます。アニメーション中にフェードさせることはできますか?

Answer 1

今は「animate」と「fadeTo」を使っていますが、「animate」で全部できます。つまり、「アニメーション」機能を使用して、オブジェクトの複数のプロパティを「アニメーション化」できます。したがって、box.stop(true, true).delay(100).animate({top:-0, opacity: 0},150);代わりに: を使用してください。

Answer 2

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

Answer 3

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