Jquery 如何在按钮图标更改时将CSS3动画添加到按钮

当按钮内的字体图标发生变化时，我尝试对按钮进行CSS转换，即使用jQuery将一个图标替换为另一个图标

为了更好地理解这一点，以下是我的HTML：

     <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <i class="fa fa-navicon fa-lg"></i>
     </button>  

按钮和CSS转换的CSS样式：

.navbar-toggle {
    width: 81px;
    height: 80px;
    background: #c4414f!important;
    border-radius: 0;
    border: 0 none;
    margin: 0;
    padding-left: 29px;
    z-index: 2000;
}

.navbar-default .navbar-toggle .icon-bar {
        background-color: #FFF;
        height: 3px;
        border-radius: 0;
    } 
    .navbar-toggle.active {
        -webkit-box-shadow:inset 1px 1px 1px 1px #000000;
        box-shadow: -1px 1px 1px 0px #333333;
    }

.navbar-toggle {
    color: #FFF;
    padding-left: 10px;
}
    .navbar-toggle i {
        font-size: 24px;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

但当菜单图标更改为“X”时，按钮上的转换不起作用。我做错了什么？ 我做了一把小提琴：

根据要求，我希望添加到导航按钮的转换类型示例如下：

---

使用

fadeOut

和

fadeIn

函数可以达到以下目的：

 $(".navbar-toggle").on("click", function () {
     $(this).toggleClass("active");
     $('body').toggleClass("navbar-is-active");
     $('.navbar-toggle i').fadeOut(100, function(){
         $(this).toggleClass('fa-navicon');
     })
     $('.navbar-toggle i').toggleClass('fa-remove').fadeIn(150);
 });

编辑：

---

请注意，

fadeOut

后切换类是为了防止图标弹出，并且第一个动画速度（100ms）属于当前图标

fadeOut

，第二个属于下一个图标

fadeIn

。你的总动画速度是这两个值的总和（100+150=250ms）

你希望动画做什么？你没有任何特定的CSS用于你切换的任何类，因此没有太多的转换。是的，这就是问题所在。基本上，当导航栏图标更改时，我希望它具有渐变效果，例如淡入淡出。您应该在问题中指定要查找的渐变类型（通过编辑添加）。这将提高您问题的质量。我们应该在小提琴中单击什么，输出窗口中没有输出。我刚刚编辑了我的问题并提供了一个示例。你的答案很好，有没有可能更接近所提供的例子？谢谢你的意思是过渡速度或过渡（例如线性、轻松…）？这里有一些可编辑变量的更新。

 $(".navbar-toggle").on("click", function () {
     $(this).toggleClass("active");
     $('body').toggleClass("navbar-is-active");
     $('.navbar-toggle i').fadeOut(100, function(){
         $(this).toggleClass('fa-navicon');
     })
     $('.navbar-toggle i').toggleClass('fa-remove').fadeIn(150);
 });