jquery toggleClassを3.5msに渡って

Question

この機能が正しく機能しないのはなぜですか？トグルクラスが3.5msの間にトグルすることを除いて、すべてが正常に動作します。正しく切り替えられますが、アニメーションは発生しません。

このコードは、より複雑なナビゲーションの概略図ですが、そのアイデアは同じです。

$('ul#menu-main-menu li:nth-child(2) a').click(function() { 
 
     $('ul#menu-main-menu').toggleClass('nav-border', 350); 
 
    });

ul#menu-main-menu { 
 
    padding: 20px; 
 
    border-radius: 20px; 
 
    border: 1px solid #ddd; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    margin: 0 10px 0 0; 
 
    cursor: pointer; 
 
} 
 

 
.nav-border { 
 
    border-radius: 20px 20px 0 0 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.min.js"></script> 
 
<ul id='menu-main-menu'> 
 
    <li> 
 
    <a> First</a> 
 
    </li> 
 
    <li> 
 
    <a> Second</a> 
 
    </li> 
 
    <li> 
 
    <a> Third</a> 
 
    </li> 
 
</ul>

すべてのいただきありがとうございます。

Answer 1

あなたはcss transitionプロパティを使用してそれを行うことができます。

transition :border-radius 350ms; 

全コード：

$('ul#menu-main-menu li:nth-child(2) a').click(function() { 
 
     $('ul#menu-main-menu').toggleClass('nav-border', 350); 
 
    });

ul#menu-main-menu { 
 
    padding: 20px; 
 
    border-radius: 20px; 
 
    border: 1px solid #ddd; 
 
    transition :border-radius 350ms; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    margin: 0 10px 0 0; 
 
    cursor: pointer; 
 
} 
 

 
.nav-border { 
 
    border-radius: 20px 20px 0 0 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id='menu-main-menu'> 
 
    <li> 
 
    <a> First</a> 
 
    </li> 
 
    <li> 
 
    <a> Second</a> 
 
    </li> 
 
    <li> 
 
    <a> Third</a> 
 
    </li> 
 
</ul>

Answer 2

jqueryを使用していますか？ toggleClassのjquery UIバージョンのみが継続時間をとります。

http://api.jquery.com/toggleClass/

http://api.jqueryui.com/toggleClass/