0

我有几个靠近的盒子,当任何盒子悬停在上面时,它们会显示一个不同的盒子,这是一个代码片段(不完整,所以没有小提琴):

<div id="big_square_1" class="big_square" style="display:none;"></div>
<div id="big_square_2" class="big_square" style="display:none;"></div>
<div id="big_square_3" class="big_square" style="display:none;"></div>
<div id="big_square_4" class="big_square" style="display:none;"></div>

和 jQuery:

    $("#big_square_1").mouseenter(function() {
        $('#big_square_1').css("border", "1px solid #191919").css("height", "98px").css("width","98px");
        $('#hover_Box').fadeIn('fast');
    });
    $("#big_square_1").mouseleave(function() {
        $('#big_square_1').css("border", "inherit").css("height", "100px").css("width", "100px");
        $('#hover_Box').fadeOut('fast');
    });
    $("#big_square_2").mouseenter(function() {
        $('#big_square_2').css("border", "1px solid #191919").css("height", "98px").css("width","98px");
        $('#hover_Box').fadeIn('fast');
        $('#side_box_1').append('<br><br><br><p>This is ARC</p>');
    });
    $("#big_square_2").mouseleave(function() {
        $('#big_square_2').css("border", "inherit").css("height", "100px").css("width", "100px");
        $('#hover_Box').fadeOut('fast');
    });

我已经分别配置了这些事件,以便以后可以将带有 .html 的内容添加到框中。然而,就目前而言,当这些盒子快速翻转时,“快”根本不够快,它们淡入的盒子最终会闪烁。如何修改我的 mouseenter/mouseleave 以防止这种闪烁?(我是 .stop/.bind 新手)。另外,我知道我可以对多个 CSS 更改使用速记,我只是更喜欢这样做,直到我解决了悬停问题。

4

1 回答 1

2

尝试.stop(true,true)在您的 fadeIn 和 fadeOuts 之前放置。

于 2013-02-20T17:14:56.073 回答