jquery toggleSınıfı 3.5 yıl boyunca değişebilir

Question

Bu işlev neden düzgün çalışmıyor? Her şey olması gerektiği gibi çalışır, ancak toggleClass 3.5ms'lik bir rotada geçiş yapar. Doğru şekilde değişir, ancak hiçbir animasyon gerçekleşmez.

Aşağıdaki kod, daha karmaşık bir gezinmenin kaba bir örneğidir, ancak fikir aynıdır.

$('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>

teşekkür ederim.

Answer 1

Sen css transition özelliğini kullanarak bunu yapabilirsiniz.

transition :border-radius 350ms; 

Tam kodu:

$('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 ui kullanıyor musunuz? ToggleClass'ın yalnızca jquery ui sürümü bir süre alır.

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

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