Question

我正在网站上工作，想要通过在点击事件下添加“.hidden”引导类来显示和隐藏它的各个部分。基本上是：

  $('selector').click(function(){
     $('*part-to-hide*').addClass("hidden");
     $('*part-to-show*').removeClass("hidden");
   }

它工作正常但需要一些流畅的动画。我有什么选择？

注意：虽然我看到了类似的问题，但我认为它与我的不同（因而不是重复）因为它以使用引导程序“隐藏”类为中心。在那个问题上，如果答案能够解决问题，同时坚持代码的主要思想，即在元素中添加和删除“隐藏”类，我会很感激。

Answer 1

只需为您的元素指定过渡属性;）点击此处查看更多信息：https://www.w3schools.com/css/css3_transitions.asp

小提琴： https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

Answer 2

＆＃13;

$('#selector').on('click',function(){
    if($(this).attr("data-animate")=="0"){
      $('#Div1').removeClass('Div2').addClass('Div1');
      $(this).attr("data-animate","1");
           $(this).val("Change color");
    }
    else{
     $('#Div1').removeClass('Div1').addClass('Div2');
          $(this).attr("data-animate","0");

                 $(this).val("start animate");
    }
    
     
});

＆＃13;

.Div2{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example2;
    animation-duration: 4s;
}

.Div1{

    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:red; left:0px; top:0px;}
}

@-webkit-keyframes example2 {
    0%   {background-color:red;}
    25%  {background-color:yellow; }
    50%  {background-color:blue; }
    75%  {background-color:green; }
    100% {background-color:red;}
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="selector" type="button" data-animate="0" value="start animate"/>
<div id="Div1"></div>

＆＃13;

Answer 3

＆＃13;

$( document ).ready(function() {
    $(".togglediv").on('click',function(){
      $(".showdiv").toggleClass("hidden");
      $(".hidediv").toggleClass("hidden");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
       <div class="parent">
        <div class="col-md-6 col-sm-6 col-xs-6">
             <div class="showdiv hidden">
             show div
             </div>   
              <div class="hidediv">
             hide div
             </div> 
        </div>
        <button class="togglediv">show/hide content</button>
    </div>
</div></div>

＆＃13;

如何为addClass（）和removeClass jQuery方法设置动画？

3 个答案: