Question

我是网站开发的新手。我的代码工作得很好。我只想要的是，当我点击第一个div时，它会以翻转动画消失，然后会出现第二个div。然后，当我点击第二个div时，同样的动画会出现，因为第三个div出现了。我只是希望CSS或jQuery代码在它消失时翻转div。

<div class="row">
    <div class="col-md-6 abc">
        <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.hide();
        $next.show();
    }
});

Answer 1

试试这个，

＆＃13;

$('.col-md-6').click(function() {
	var $current = $(this).find('div:visible');
	var $next = $current.next()
	if ($next.length) {
		$current.animate({
			borderSpacing: -180
		}, {
			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.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)');
		},
		duration: 'slow'
	}, 'swing').show();
		
	}
});

＆＃13;

Answer 2

很难了解你需要哪种翻转想法。这是作品库的链接。我希望它可以提供帮助。

FLIP LIB

Answer 3

在您提供的链接上，您可以按照几个链接进入示例页面，其中包含所有source code以及详细教程，了解如何获得所需的确切效果。首先要四处看看是值得的！

Answer 4

请尝试这个

 $('.col-md-6').click(function() {
   var $current = $(this).find('div:visible');
   var $next = $current.next()
   if ($next.length) {
       $current.hide(1000);
       $next.show(1100);
   }

}）;

用翻转效果隐藏div

4 个答案: