Question

我为我正在构建的网站的首页创建了一个菜单，其中包含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/

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

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

Answer 1

试试这个：

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()，这将停止队列中的所有动画，然后播放当前动画。这可以解决你所谈论的眨眼效应。

Answer 2

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

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

这将阻止任何未决的淡入。

Answer 3

您可能想尝试使用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上的所有悬停，只有在锚点上才能执行某些操作

working fiddle

编辑：是的你需要添加stop（）停止方法 - 我现在看到你发生了什么

jQuery悬停效果触发其他列表项

3 个答案: