Question

我试图通过fadeIn + zoom简单地显示和隐藏div的平滑过渡动画。

我在div1中添加了一个类（＆＃39; hide＆＃39;），同时从div2中删除了一个类（＆＃39; hide＆＃39;），这样当你点击div1时它就消失了div2淡入并缩放到视图中。

HTML

<div class="parentWrapper">
  <div class="div1">HELLO</div>
  <div class="div2 hide">GOODBYE</div>
</div>

JS

$('.div1').on('click', function() {
   $(this).addClass('hide', 1000);
   $(this).parent().find('.div2').removeClass('hide', 1000);
}

课程＆＃39;隐藏＆＃39;是从bootstrap继承...但上面不起作用......为什么？！

注意，我使用$（this）.parent（）。find（）而不仅仅是$（＆＃39; div2＆＃39;）的原因是因为在我的实际代码中，有2个div具有相同的类名。我需要确保我设置用户正在与之交互的正确div的动画，而不是另一组div1 + 2。

Answer 1

您无法为display: none属性设置动画。只能对带有数值的css规则进行动画处理。

在这种情况下，您可以使用淡入/淡出或幻灯片进/出动画，例如

jQuery(function($) {
  $('.div1').on('click', function() {
    $(this).fadeOut(1000, function() {
      $(this).addClass('hide');
    });
    var $div2 = $(this).parent().find('.div2').removeClass('hide').css('display', 'none').fadeIn(1000);
  })
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>

<div class="parentWrapper">
  <div class="div1">HELLO</div>
  <div class="div2 hide">GOODBYE</div>
</div>

Answer 2

请尝试下面的代码，我为消除添加了'缓和效果'。

$('.div1').on('click', function () {
  $(this).addClass("hide", 1000, "linear");
  $(this).parent().find('.div2').removeClass('hide', 2000, 'linear');
});

在addClass + removeClass上添加动画

2 个答案: