jQuery的褪色/调光时，一个悬停，我90％有其他列表中的元素..？

StackOverflow https://stackoverflow.com/questions/760280

  •  09-09-2019
  •  | 
  •  

题

我有一个无序列表，其具有也许30项。当这些项目中的一个盘旋，列表项的其余部分褪色至30％和悬停的项目保持在100％;当您从列表中离开时，它们全部消失回升到100％，我设法这一点。

我的问题，当您从项目移到项目出现的时候，其他列表项褪色回升到100％，然后回落到30％。我想他们，除非用户从整个名单移开停留在30％。

我使用hoverIntent插件上的每个列表项。我还使用jQuery的一类添加到当前列表项，那么我就能褪去了休息和删除它，一旦你离开。我已经使用了jQuery食谱网站上发现一个等待功能（ http://docs.jquery.com/Cookbook /等待）

你听到了吗？

下面是我到目前为止的代码：

$.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
});

*显然这是一个$（文件）内。就绪（函数（）

任何人能帮助我吗？

非常感谢

有帮助吗？

解决方案

这听上去很不错，所以我实现它。从事物的外表，你的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>

其他提示

约做这样的操作方法：点击 简单测试，但我认为它达到你正在寻找的效果。

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)
  })

})

<强>以下是更简单的解决方案： 

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

有关一个仅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;

ID需要看你的HTML，以便更好地理解这个问题，但对于这样的事情：

在我看来，你的问题是，你是淡入淡出在你的列表中的每个项目，你应该做的是： 1）如果鼠标移出从整个列表，淡入它在 2）从一个项目用户移动到另一个项目，退色鼠标悬停项可见，他人不可见。

这将是容易使用自定义插件 - 再次，身份证需要看到的HTML。它的很多采取没有看到直播，或至少在html。

您已经接近了，这应该是一个容易解决。在你出功能检查，看看第一如果鼠标已经离开了UL完全。如果是，则处理您褪色。如果还没有那么让他们消失，只是改变你离开了李，你正在进入李的衰落。

这是很容易与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;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top