我有一种愚蠢的网站请求 - 他们希望悬停状态具有动画效果,因为他们认为没有人会知道那里有链接...
无论如何...我创建了一个幻灯片来展示我试图创建的效果 - 但现在我无法让它与 jQuery 代码一起工作。我在这里找到了我认为的答案:Trying to loop between CSS classes/hover states - Jquery
但即使合并了这个新代码,动画/切换也不起作用。
我想我遗漏了一些明显的东西 - 谁能帮忙?
这是展示我想要的效果的幻灯片版本: http://test.fatcat-studios.com/gtm/index.html 但我想用 jQuery 做到这一点,所以当你与它交互时,正确的悬停状态会在实际鼠标悬停时显示。
这是我的 jQuery 代码:
$(function() {
var doToggle = true;
$('a.res').removeClass('hover');
$('a.com').addClass('hover');
var tid = setInterval( function() {
if (doToggle) $('a.res, a.com').toggleClass('hover');
}, 2000);
setTimeout(function() {
if (tid) clearInterval(tid);
$('a.res,a.com').removeClass('hover');
}, 30000); // stop toggling after 30 seconds
$('a.res,a.com').hover( function() {
doToggle = false;
}, function() {
doToggle = true;
});
});
非常感谢任何帮助!让我知道是否需要更多信息。 俳句猫
最佳答案
试试这个:
$(function() {
var autoToggle = true;
var $togglers = $('a.res, a.com');
var tid_1,
tid_2 = setTimeout(function() {
clearInterval(tid_1);
$togglers.removeClass('hover');
autoToggle = false;
}, 30000); // stop toggling after 30 seconds
$togglers.hover(function() {
clearInterval(tid_1);
$togglers.removeClass('hover');
$(this).addClass('hover');
}, function() {
if(autoToggle) {
$('a.res').removeClass('hover');
$('a.com').addClass('hover');
tid_1 = setInterval(function() {
$togglers.toggleClass('hover');
}, 2000);
}
else {
$togglers.removeClass('hover');
}
}).triggerHandler('mouseout');
});
关于jquery - 在悬停状态之间循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13906159/