使用翻转效果隐藏 div

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();
    }
});

- farkhund abbas

---

如果没有示例，很难理解您所说的“翻转”动画是什么意思。如果您有特定的效果想法，如果能指导我们一个示例，那将会非常有帮助 :) - jonny

我想要这种翻转动画示例在此。当我点击div时，它会像这样翻转并消失。 - farkhund abbas

Answer 1

Try this,

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

- Gagan

---

谢谢你的代码...我能减慢翻转动画的速度吗...@Gagan - farkhund abbas

将"duration"的值设置为以毫秒为单位，根据您的需要来减慢速度。（例如：要设置为一秒钟，将duration设置为1000） - Gagan

将 borderSpacing 更改为 -180 以实现您想要的效果。 - Gagan

有没有办法，当我点击第一个 div 时，它隐藏并带有动画出现第二个 div...请帮帮我...@gagan - farkhund abbas

Answer 2

请尝试这个。

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

- Abhishek Singh

Answer 3

很难想出你需要哪种翻转效果。这是一个库的链接，希望它能帮到你。

FLIP LIB

- Mahabub Islam Prio

Answer 4

在您提供的链接中，您可以跟随几个链接，进入示例页面，其中包含所有源代码和详细的教程，以实现您想要的精确效果。先四处看看是值得的！

- jonny