0

移動したい要素があり、移動の途中でフェードアウトし始めます。移動が完了するまでに、不透明度は 0 になります。これらのアニメーションをよりスムーズにするために、トランジット ライブラリを使用しています。独自の作品の不透明度。独自の作品に移動しますが、2 つはうまく連携しません。どこが間違っていますか？

$(function() {
    $("#go").click(
        function(){
        $("#block").transition({y:'90px', queue:false}, 2000);
        $("#block").transition({ x: '90px',queue:false }, 2000 );
        $("#block").transition({ opacity: 0 ,queue:false , delay:1000 }, 1000 );
    });
});

フィドル: http://jsfiddle.net/bastiat/5844Q/

4

2 に答える 2

1

CSS トランジションを使用して、jquery: JS Fiddleでそれらをトリガーすることを検討します。

CSS

 div {
     background-color:yellow;
     width:100px;
     border:1px solid blue;
     position:absolute;
     x:50px;
     -webkit-transition: all .8s ease;
     -moz-transition: all .8s ease;
     -ms-transition: all .8s ease;
     -o-transition: all .8s ease;
     transition: all .8s ease;
     margin-left: 0px;
 }

JQuery

$("#go").click(function () {       
$("#block").css('margin-left', '90px').css('opacity', '0');                   
});

JQuery (移動後に不透明度をフェードさせたい場合): JS Fiddle

$("#go").click(function () {
    $("#block").css('margin-left', '90px')
    .delay(800)
        .queue(function (next) {
        $(this).css('opacity', '0');
        next();
        });
    });
于 2014-03-28T17:42:34.807 に答える