我是jQuery & amp通過在下一張幻燈片上添加和刪除“active”類來制作一個簡單的滑塊，這樣做很好，但是看起來很難看，因為沒有動畫。有什么方法可以將添加和刪除類的過程動畫化？比如:

$('#next').on('click', function(){
    $('div.active').removeClass('active', duration: 500ms).next().addClass('active', duration: 500ms);})

在Jquery文檔網站上，我看到有一個動畫函數，用來制作動畫。在我的情況下可以使用該功能嗎？

更新:我還嘗試在div和div.active上應用CSS過渡，但沒有成功。

Css:

.slider div {
        display: none;
        opacity: 0;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    div.active {
        display: inline-block;
        opacity: 1;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

從不同用戶的評論中，我了解到css過渡不能應用于display: none元素。所以我沒有顯示none，而是應用了高度0px不透明度:0；這對我來說很好。

.slider img{
 height: 0px;
 opacity: 0;
 display: block;
 -webkit-transition: opacity 2s ease;
 -moz-transition: opacity 2s ease;
 -ms-transition: opacity 2s ease;
 -o-transition: opacity 2s ease;
 transition: opacity 2s ease;
}

.slider img.active{
 height: 360px;
 opacity: 1;
 -webkit-transition: opacity 2s ease;
 -moz-transition: opacity 2s ease;
 -ms-transition: opacity 2s ease;
 -o-transition: opacity 2s ease;
 transition: opacity 2s ease;
}

感謝這把小提琴的創造者給了我這個想法。

你真的不能動畫添加類或刪除類，但你可以添加一個過渡

但是你可以使用一些css:

.item {   
   opacity: 0
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.item.active{
   opacity: 1
}

在您的情況下，您可以使用過渡來代替動畫 https://developer . Mozilla . org/en-US/docs/Web/CSS/CSS _ Transitions/Using _ CSS _ Transitions

添加動畫類:

$(".otp-wrapper").addClass('test');

刪除動畫類:

$(".otp-wrapper").removeClass('test');

樣式表:

.test {
        animation: shake 0.5s;
        animation-iteration-count: infinite;
      }

@keyframes shake {
        0% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(5px);
        }
        50% {
          transform: translateX(-5px);
        }
        75% {
          transform: translateX(5px);
        }
        100% {
          transform: translateX(0);
        }
      }
      .err-msg{
        font-size:16px;
        font-weight:400;color: red;
      }

推薦人:https://www.w3schools.com/howto/howto_css_shake_image.asp