如何在addClass();
上使用缓和或延时?
$("#date_1").hover(
function () {
$(this).addClass("door");
$(this).addClass("doorstatic", "slow"); // after 2seconds i want to add this class during the hover
},
function () {
$(this).removeClass("door");
$(this).removeClass("doorstatic"); // both classes are instantly removed when hover off
}
);
答案 0 :(得分:12)
$("#date_1").hover(
function () {
var $this = $(this);
$this.addClass("door");
setTimeout(function() {
$this.addClass("doorstatic");
}, 2000); // 2000 is in mil sec eq to 2 sec.
},
function () {
$(this).removeClass("door doorstatic");
}
);
您可以将您的课程分组为removeClass("door doorstatic")
这里的问题是,如果你鼠标移开并且在两秒钟之前鼠标移出,你的元素上仍然会有doorstatic
类。
修复:
$("#date_1").hover(
function () {
var $this = $(this),
timer = $this.data("timer") || 0;
clearTimeout(timer);
$this.addClass("door");
timer = setTimeout(function() {
$this.addClass("doorstatic");
}, 2000); // 2000 is in mil sec eq to 2 sec.
$this.data("timer", timer);
},
function () {
var $this = $(this),
timer = $this.data("timer") || 0;
clearTimeout(timer);
$this.removeClass("door doorstatic");
}
);
在 jsFiddle 创建了解决方案的实例。
答案 1 :(得分:2)
javascript的setTimeout
方法可用于在设定的延迟(以毫秒为单位)后运行您指定的代码。
试试这个:
var timeout;
$("#date_1").hover(
function () {
$(this).addClass("door");
timeout = setTimeout(function() { $(this).addClass("doorstatic"); }, 2000);
}, function () {
clearTimeout(timeout);
$(this).removeClass("door doorstatic");
}
);
答案 2 :(得分:2)
实际上,您只需致电jQuery's delay致addClass
来电。
像
这样的东西 $(this).addClass("door").delay(2000).addClass("doorstatic", "slow");
应该这样做。