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/

jquery运输不透明动画冲突？

2 个答案: