2

我有一个无序列表，可能有 30 项。当其中一个项目悬停时，列表的其余项目消失到 30%，悬停的项目保持在 100%；当您从列表中移出时，它们都会恢复到 100%，而我已经做到了。

当您从一个项目移到另一个项目时，我的问题出现了，其他列表项目淡化回 100%，然后又回落到 30%。我希望他们保持在 30%，除非用户离开整个列表。

我在每个列表项上使用 hoverIntent 插件。我还使用 jQuery 向当前列表项添加了一个类，这样我就可以淡化其余部分，并在您离开后将其删除。我使用了 jQuery Cookbook 网站 ( http://docs.jquery.com/Cookbook/wait )上的等待函数

你明白我的意思吗？

到目前为止，这是我的代码：

$.fn.wait = function(time, type) {
    time = time || 300;
    type = type || "fx";
    return this.queue(type, function() {
        var self = this;
        setTimeout(function() {
            $(self).dequeue();
        }, time);
    });
};

$("#sites li:not(#sites li li)").hoverIntent(function(){
    $(this).attr('class', 'current'); // Add class .current
    $("#sites li:not(#sites li.current,#sites li li)").fadeTo("slow", 0.3); // Fade other items to 30%
    },function(){
    $("#sites li:not(#sites li.current,#sites li li)").wait().fadeTo(600, 1.0); // This should set the other's opacity back to 100% on mouseout
    $(this).removeClass("current"); // Remove class .current
});

*显然这是在 $(document).ready(function()

任何人都可以帮助我吗？

非常感谢

4

7 回答 7

7

这听起来很有趣，所以我实现了它。从外观上看，您的 css 选择器可以简化。我认为您只希望最上面的列表项淡入淡出，但从示例中并不清楚。此示例突出显示最顶部的节点并正确进行淡入淡出。我认为这就是你想要的效果，但我不是 100% 确定。我没有使用 wait() 功能，因为我不确定它对你有什么作用。

从本质上讲，听起来您遇到的问题是当您尚未离开列表时，您在悬停时正在淡入项目。当您完全离开列表时，您只想淡入列表或其他列表项。不要对该部分使用 hoverIntent ，并处理整个无序列表上的淡入淡出，这应该很好。

示例：http: //jsbin.com/usobe

修补示例：http: //jsbin.com/usobe/edit

<ul id="sites">
  <li> site 1
   <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul>
  <li> site 2
   <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul>  
  <li> site 3  
   <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul>
  <li> site 4
   <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul>  
  <li> site 5
</ul>    

<script>
$(function() {

$("#sites").hover(
     function() {}, 
     function() {        
       $('#sites>li').fadeTo("fast", 1.0); 
     }
);

$("#sites>li").hoverIntent(
    function(){
       $(this).attr('class', 'current'); // Add class .current
       $(this).siblings().fadeTo("fast", 0.3); // Fade other items to 30%
       $(this).fadeTo("slow", 1.0); // Fade current to 100%

    },
    function(){            
      $(this).removeClass("current"); // Remove class .current
      $(this).fadeTo("fast", 1.0); // This should set the other's opacity back to 100% on mouseout   
    });
});

</script>
于 2009-04-17T13:38:45.530 回答
3

做这样的事情怎么样：
简单地测试了它，但我认为它达到了你想要的效果。

jQuery(function($){
  var $ul = $("ul#sites")

  $ul.hover(function(){
    $("li", $ul).stop().fadeTo("fast", 0.3)

    $("li", $ul).hover(function(){
        $(this).stop().fadeTo("fast", 1.0)
    },function(){
        $(this).stop().fadeTo("fast", 0.3)
    })
  },function(){
    $("li", $ul).stop().css("opacity", 1.0)
  })

})
于 2009-04-17T13:46:15.747 回答
1

这是更简单的解决方案：

$("ul#sites > li").fadeTo("fast", 0.3);
$("ul#sites > li").hover(
    function() { $(this).fadeTo("fast", 1.0); },
    function() { $(this).fadeTo("fast", 0.3); }
);
于 2011-05-29T13:08:36.890 回答
1

对于纯 CSS 解决方案：

$('a.leaders').hover(function() {
    $(this).addClass('hovered');
    $('a.leaders').not('.hovered').addClass('nothovered');
}, function() {
    $('a.leaders').removeClass('nothovered hovered');
});

a.leaders.hovered { opacity:1; }
a.leaders.nothovered { opacity:0.6; }

只需确保您已将过渡应用于您的元素，例如：

-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
于 2013-10-15T17:35:43.877 回答
0

id 需要查看您的 html 以更好地理解这个问题，但是这样的事情呢：

在我看来，您的问题是您正在列表中的每个项目上淡入和淡出，您应该做的是：1）如果鼠标从整个列表中移出，则将其淡入 2）当用户从一个项目移动时到另一个项目，将鼠标悬停的项目淡化为可见，其他项目不可见。

使用自定义插件会很容易 - 同样，id 需要查看 html。它有很多东西可以在没有看到它的情况下进行，或者至少是 html。

于 2009-04-17T13:16:33.463 回答
0

你很接近，这应该很容易解决。在您的输出功能上，首先检查鼠标是否完全离开了 UL。如果有，则处理您的淡入。如果没有，则保持淡入，并简单地更改您离开的 li 和您正在输入的 li 的淡入。

于 2009-04-17T13:27:41.657 回答
0

使用 CSS 很容易做到这一点。

看看这个http://jsfiddle.net/drjorgepolanco/ga5dy0tp/

html

<div id="main-nav">
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
    </ul>
</div>

css

 #main-nav ul {
    list-style: none;
 }

 #main-nav ul:hover li {
    opacity: 0.2;
 }

 #main-nav ul:hover li:hover {
    opacity: 1;
 }

向列表元素添加过渡，使其看起来更漂亮......

#main-nav ul li {
    transition: opacity 0.4s ease-out;
}
于 2015-09-05T02:14:18.030 回答