javascript - jquery中转不透明度动画冲突？

Question

我有一个想要移动的元素，并且在移动的中途开始淡出。移动完成时，它的不透明度为 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/

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

Answer 2

要实际使用中转插件来解决此问题，您需要将它们添加到同一个transition()调用中。

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

工作小提琴：http: //jsfiddle.net/qngmwmo2/