Как остановить анимацию с помощью jQuery

Я работаю над приложением, где навигация генерирует некоторый эффект анимации во время изменения классов, в то время как мы не использовали анимацию css/jQuery

Полный код приведен в jsFiddle здесь

Посмотрите, как большая белая буква и оранжевый цвет от оранжевого класса исчезает в другом. Есть ли какой-нибудь метод jquery/css, который можно использовать для обработки этой ситуации?

<nav id="lastNavigation" class="d row clearfix">
<aside class="col-xs-11">
    <div class="col-xs-12 lessonNavigation lesson">
        <ul class="expandable">
            <li class=""><a href="#"><span>L1<b>: Recognize a digit represents 10 times the value</b></span></a>

            </li>
            <li class=""><a href="#"> <span>L2<b>: Recognize a digit represents 10 times the value</b></span></a>

            </li>
            <li class=""><a href="#"> <span>L3<b>: Recognize a digit represents 10 times the value</b></span></a>

            </li>
            <li class=""><a href="#"> <span>L4<b>: Recognize a digit represents 10 times the value</b></span></a>

            </li>
            <li class=""><a href="#"><span>L5<b>: Recognize a digit represents 10 times the value</b></span></a>

            </li>
        </ul>
    </div>
</aside>
</nav>

Используемый jQuery здесь

$('.lessonNavigation li').attr('class', 'dn');
$('.lessonNavigation li:eq(0)').attr('class', 'expanded left');
$('.lessonNavigation li:eq(1)').attr('class', 'activeLesson');
$('.lessonNavigation li:eq(2)').attr('class', 'expanded right');

// ========== Right Arrow and Right Tile moves navigation ================== 
function slidingNavRight() {
$('.lessonNavigation .expanded.left').attr('class', 'dn');
$('.lessonNavigation .activeLesson ').attr('class', 'expanded left');
$('.lessonNavigation .expanded.right').attr('class', 'activeLesson');
$('.lessonNavigation .activeLesson + li ').attr('class', 'expanded right');
}

$('.lessonNavigation').on('click', '.icon-arrow-right, .expanded.right', function () {
if ($('li:last-child').hasClass('activeLesson')) {
    return false;
}
slidingNavRight.apply('.icon-arrow-right, .expanded.right');
});

// ========== Left Arrow and Left Tile moves navigation ==================  
function slidingNavLeft() {
$('.lessonNavigation .expanded.right').attr('class', 'dn');
$('.lessonNavigation .activeLesson ').attr('class', 'expanded right');
$('.lessonNavigation .expanded.left').attr('class', 'activeLesson');
$('.lessonNavigation .activeLesson').prev().attr('class', 'expanded left');
}
$('.lessonNavigation').on('click', '.icon-arrow-left, .expanded.left', function () {
if ($('li:first-child').hasClass('activeLesson')) {
    return false;
}
slidingNavLeft.apply('.icon-arrow-left, .expanded.left');
});