[英]How to stop animation using jQuery
I'm working on an application where navigation is generating some animation effect during classes change while we didn't use any css / jQuery animation 我正在开发一个应用程序,其中导航在类更改期间生成一些动画效果,而我们没有使用任何css / jQuery动画
Full code is given in jsFiddle here 完整代码在jsFiddle中给出
Consider how big white letter and orange color from orange class fades out in another. 考虑橙色类中的大白字和橙色在另一个中淡出。 Is there some jquery / css method that can be used to handle this situation?
是否有一些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 used is here 使用的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');
});
The problem is with your tag a 问题是你的标签
In your bootstrap.css line 291... 在你的bootstrap.css 291行......
a {
color: #428bca;
text-decoration: none;
transition: 0.5s;
}
You can just override 你可以覆盖
.expandable a {
transition-property: none;
-moz-transition-property: none;
-webkit-transition-property: none;
-o-transition-property: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.