[英]jquery UI add/remove class duration not working
我正在使用带有addClass / removeClass函数的Jquery UI。 它正在改变课程,但没有持续时间。 这是我的代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
<!--This has the Effects Core and all four boxes checked in the UI Core-->
<style type="text/css">
.menu {
height: 35px;
padding: 15px 20px 5px 20px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1.3em;
font-weight: bold;
display: inline;
float: right;
background: none;
}
.menu-hover {
height: 35px;
padding: 15px 20px 5px 20px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1.3em;
font-weight: bold;
display: inline;
float: right;
background: url(../img/header-bg2.png) repeat-x;
}
</style>
<script>
$(document).ready(function() {
$('.menu').hover(function() {
$(this).addClass("menu-hover", 1000);
}, function() {
$(this).removeClass("menu-hover", 1000);
});
});
</script>
<a href="#"><div class="menu">Contact</div></a>
<a href="#"><div class="menu">Services</div></a>
<a href="#"><div class="menu">About</div></a>
<a href="index.html"><div class="menu">Home</div></a>
我已仔细检查以确保它确实在改变类,确实如此。 有什么想法可以延长工作时间吗? 谢谢。
jQuery UI将设置背景颜色的动画,而不是背景图像的动画。
资料来源:反复试验。
对于延迟,您可以使用jQuery的delay()
:
$('.menu').hover(function() {
$(this).delay(1000).addClass("menu-hover");
}, function() {
$(this).delay(1000).removeClass("menu-hover");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.