jQuery .show combined with CSS transition

Question

Coming from Animate element transform rotate (Answer of Dyin) I still can't get it to work properly.

I want to fade in a div with jQuery .show(). This div is containing an img. Now I want that img to be zoomed in slowley with css transition and scale (not jQuery, because it is much smoother) at the very beginning of the .show() command.

In short: I want the div to fade in while the containing img is zooming (show and zoom at the same time). But I only manage to zoom after the .show() function is completed, like that:

$( this ).show(800, function(){
    $( ".bullets" ).removeClass("wait");
    $( this ).find(".csc-textpic-image img").removeClass("zoomout").addClass("zoomin");
});

If I position the .addClass() outside the function, the class is added in the source code, but the img isn't zooming at all, like this:

$( this ).find(".csc-textpic-image img").removeClass("zoomout").addClass("zoomin");
$( this ).show(800, function(){
    $( ".bullets" ).removeClass("wait");

})

CSS:

.zoomin {
    transition: 24s linear;
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}
.zoomout {
    transition: 24s linear;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

Any help will be higly appreciated!

Can you provide us with a [jsfiddle](http://jsfiddle.net/) of your current progress? — Rizky Fakkel, Apr 30 '15 at 11:25

score 3 · Accepted Answer · answered Apr 30 '15 at 13:25

Many thanks to Jeremy Thille! Easyiest solution is with full CSS:

Instead of jQuery .show() I just added two more classes: .visible and .hidden

.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 2s linear;
}
.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

And add / remove them to / from the parent DIV:

$( this ).removeClass("hidden").addClass("visible");
$( this ).find(".csc-textpic-image img").removeClass("zoomout").addClass("zoomin");

Now, fade in and scale work at the same time! Thanks!

jQuery .show combined with CSS transition

1 Answers1