0

我为正在构建的网站的首页创建了一个菜单，该菜单有 8 个按钮，如下所示。我编写了一小段 jQuery，它会导致所有菜单项的不透明度与悬停的项目不同。这是我的代码：

HTML：

<div class="row-fluid" id="home_page_icons">
                <div class="span12">                    
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">News & Events</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Facilities</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Membership</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Pay As You Play</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Health & Fitness</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Exercise Classes</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Children's Activities</a>
                    <a class="last" href="<?php echo JURI::root() . 'index.php/news-events' ?>">Lane 9 Cafe</a>                                     
                </div>
            </div>

jQuery：

jQuery('#home_page_icons div a').hover( function() {            
        jQuery(this).siblings().fadeTo("fast", 0.3);
        },
        function() {
            jQuery(this).siblings().fadeTo("fast", 1.0);
        })

我还创建了一个 JSFiddle 来显示我的问题：

http://jsfiddle.net/2zeF8/

当您将鼠标悬停在菜单项上时，它可以正常工作（所有其他项目都会更改不透明度），但是如果您将鼠标悬停在菜单项之间，例如在最左侧和最右侧之间，则会激活其间所有项目的动画，从而导致闪烁效果.

有没有人对我如何解决这个问题有任何想法？谢谢

4

3 回答 3

2

尝试这个：

jQuery('#home_page_icons div a').hover(function () {
    jQuery(this).siblings().stop().fadeTo("fast", 0.3);
},

function () {
    jQuery(this).siblings().stop().fadeTo("fast", 1.0);
});

演示 - http://jsfiddle.net/bBtZp/

我在stop()之前添加了一个fadeTo()，它将停止队列中的任何动画，然后播放当前动画。这可以消除您所说的闪烁效果。

于 2013-02-04T16:06:49.743 回答
0

您可能想尝试使用该on方法

jQuery('#home_page_icons div').on('mouseenter','a',function () {
        jQuery(this).siblings().stop().fadeTo("fast", 0.3);
}).on('mouseleave','a',function () {
        jQuery(this).siblings().stop().fadeTo("fast", 1.0);
})

它将处理 div 上的所有悬停，并且仅在它位于锚点时才执行某些操作

工作小提琴

编辑：是的，您需要添加 stop() 停止方法-我现在知道您发生了什么

于 2013-02-04T16:10:43.940 回答
0

我看到的唯一问题是，如果您从一个快速移动到另一个，那么其他项目会在它们再次消失之前闪烁，这看起来有点傻。但这很容易解决。将您的淡出线更改为：

jQuery(this).siblings().stop().fadeTo("fast", 0.3);

这将阻止任何待处理的淡入。

于 2013-02-04T16:09:01.050 回答