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/