使用jquery用动画隐藏div

时间:2015-07-01 10:11:59

标签: javascript jquery html css animation

这是我的代码...问题是当我点击第一个div它动画(180度)然后消失...我想要的是当我点击第一个div它消失而没有动画和第二个div出现使用动画..当我点击第二个div时,它也会消失,没有动画,第三个div显示动画..

请检查我卡在其中的代码......

HTML

int nCr(int n, int r) {
    if (r > n / 2) r = n - r;
    int ans = 1, i;
    for (i = 1; i <= r; i++) {
        ans *= n - r + i;
        ans /= i;
    }
    return ans;
}

这是我的剧本

<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>

2 个答案:

答案 0 :(得分:2)

你想要这个吗?

我已经更新了你的代码,假设你想要隐藏当前的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,那么请检查这个小提琴

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

答案 1 :(得分:0)

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

使用上面的代码