jquery transit opacity animation conflict?

Question

I have an element that I want to move and the, half way through the move, start fading out. By the time the move is complete, it has 0 opacity. I am using the transit library to make these animations smoother. Opacity on its own works. Move on its own works, but the 2 do not play nice together. where am i going wrong?

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

fiddle: http://jsfiddle.net/bastiat/5844Q/

Use `.animate({opacity: 0, ...})` instead of `.transition({opacity: 0, ...})` — Mathias, Mar 28 '14 at 17:36
@Mathias `transition()` is almost identical to `animate()`. It's a third party plugin that adds extra features to the native `animate()` — Sami Fouad, Feb 05 '17 at 02:48

Derek Story · Accepted Answer · 2014-03-28T17:57:45.980

I would consider using CSS transitions and just triggering them with 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 (if you want the opacity to fade after it moves over): JS Fiddle

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

score 0 · Answer 2 · answered Feb 05 '17 at 02:49

To actually use the transit plugin to solve this problem, you need to add them to the same transition() call.

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

Working fiddle: http://jsfiddle.net/qngmwmo2/

jquery transit opacity animation conflict?

2 Answers2