hide div with animation using jquery

Question

This is my code...the problem is when i click the first div it animate(180 deg) and then disappear...what i want is that when i click on first div it disappear without animation and second div appear with animation..and when i click on second div it also disappear with no animation and third div appear with animation..

please check the code i stuck in it...

HTML

<div class="row">
        <div class="col-md-6">
            <div style="background:grey">
                text here
            </div>
            <div style="background:blue;display:none">
                text here
            </div>
            <div style="background:green;display:none">
                text here
            </div>
        </div>
    </div>

This is my script

 $('.col-md-6').click(function() {
        var $current = $(this).find('div:visible');
        var $next = $current.next()
        if ($next.length) {
            $current.animate({
                borderSpacing: -360
            }, {
                step: function(now, fx) {
                    $(this).css('-webkit-transform', 'rotateY(' + now + 'deg)');
                    $(this).css('-moz-transform', 'rotateY(' + now + 'deg)');
                    $(this).css('transform', 'rotateY(' + now + 'deg)');
                },
                complete: function() {
                    $(this).hide();
                },
                duration: 'slow'
            }, 'swing');
            $next.show();
        }
    });

Answer 1

Did you want this?

I have updated your code a little assuming that you want to hide the current div and animate the next one.

   $('.col-md-6').click(function() {
    var $current = $(this).find('div:visible');
    var $next = $current.next()
    if ($next.length) {
        $current.animate({
            borderSpacing: -360
        }, {
            step: function(now, fx) {
                $(this).hide();
                $next.css('-webkit-transform', 'rotateY(' + now + 'deg)');
                $next.css('-moz-transform', 'rotateY(' + now + 'deg)');
                $next.css('transform', 'rotateY(' + now + 'deg)');
            },
            complete: function() {
                //$(this).hide();
            },
            duration: 'slow'
        }, 'swing');
        $next.show();
    }
});

https://jsfiddle.net/uop35wpo/

if you want to hide the current div after animating the next div then check this fiddle

https://jsfiddle.net/uop35wpo/1/

Answer 2

$('#id').hide('slow');

Using Above code