1

我有一种愚蠢的网站请求-他们希望悬停状态具有动画效果，因为他们认为没有人会知道那里有链接...

无论如何......我创建了一个幻灯片来展示我正在尝试创建的效果 - 但现在我无法让它与 jQuery 代码一起使用。我在这里找到了我认为的答案：尝试在 CSS 类/悬停状态之间循环 - 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;
    });
    });

任何帮助深表感谢！让我知道是否需要更多信息。俳句猫

4

2 回答 2

1

AFAIK 没有办法用 JS 模拟 CSS 悬停状态。但是，如果您想要一个简单的 jQuery 解决方案，这应该可以满足您的需求（小提琴）。

CSS（使用 :hover 伪类）

#clicky {
    color:#000;
}

#clicky:hover {
    color:#FFBF00;
}

​JS

yep = true; // just a global var to stop it flashing when the user hovers
// you may want to persist this differently

$(function() {
    setInterval(function() {
        if (yep) {
            var $c = $('#clicky');
            $c.css({color: $c.hasClass('active') ? '#000' : '#FFBF00'}).toggleClass('active');
        }
    }, 1 * 1000);

    $('#clicky').hover(function() {
        yep = false;
    }, function() {
        yep = true;
    });
});​
于 2012-12-16T23:03:24.633 回答
1

试试这个 ：

$(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');
});
于 2012-12-16T23:31:47.860 回答