添加动画到jQuery toggleClass()的问题

Issue on Adding Animation to jQuery toggleClass()

本文关键字:问题 toggleClass 动画 jQuery 添加      更新时间:2023-09-26

你能看看这个演示,让我知道我如何添加动画/速度或持续时间到下面的代码

$("#ecolomodel").on("click",function(){
   $("#ecolomodelno").toggleClass("switchshow switchhiden");
   $("#ecolomodelyes").toggleClass("switchhiden switchshow");
});

使用此标记

<div class="panel panel-default">
    <div class="panel-heading">Switch</div>
    <div class="panel-body">
        <div class="row">
           <div class="switch col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10">
                <button id="ecolomodelno" class="btn btn-primary switchshow norightradius col-lg-1 col-md-1 col-sm-2 col-xs-3">No</button>
                <button id="ecolomodel" class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-8 col-xs-9">New Model</button>
                <button id="ecolomodelyes" class="btn btn-primary switchhiden noleftradius col-lg-1 col-md-1 col-sm-2 col-xs-3">Yes</button>
           </div>
        </div>
    </div>
</div>

我已经试过了

$("#ecolomodel").on("click",function(){
   $("#ecolomodelno").toggleClass("switchshow switchhiden", 6000);
   $("#ecolomodelyes").toggleClass("switchhiden switchshow", 6000);
});

但它没有工作!

我认为你真的需要看看jQuery animate(),看看它是如何工作的。这是一个非常简单的函数,我发现自己一遍又一遍地使用它。

你可以直接编辑CSS。试着查看和测试他们网站上的一些示例。