javascript - 使用jquery隐藏带有动画的div

Question

这是我的代码...问题是当我单击第一个 div 时它会动画(180 度)然后消失...我想要的是当我单击第一个 div 它消失时没有动画并且第二个 div 出现有动画……当我点击第二个 div 时，它也消失了，没有动画，第三个 div 出现了动画……

请检查我卡在里面的代码...

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>

这是我的脚本

 $('.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

你想要这个吗？

假设您想隐藏当前的 div 并为下一个 div 设置动画，我已经稍微更新了您的代码。

   $('.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/

如果你想在为下一个 div 设置动画后隐藏当前的 div，那么检查这个 fiddle

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