当一个悬停在上面时，jQuery 淡化/变暗其他列表元素，我在那里 90%..? [英] jQuery fading/dimming other list elements when one is hovered over, I'm 90% there..?

问题描述

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

I have an unordered list, which has maybe 30 items. When one of these items are hovered over, the rest of the list items fade to 30% and the hovered item stays at 100%; when you move away from the list, they all fade back up to 100% and I have managed this.

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

My problems arises when you move from item to item, the other list items fade back up to 100% and then back down to 30%. I want them to stay at 30% unless the user moves away from the whole list.

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

I use the hoverIntent plugin on each list item. I also used jQuery to add a class to the current list item, so I could then fade the rest and remove it once you move away. I have used a wait function found on the jQuery Cookbook site (http://docs.jquery.com/Cookbook/wait)

你明白我了吗?

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

Here's my code so far:

$.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()

*Obviously this is within a $(document).ready(function()

谁能帮帮我?

非常感谢

推荐答案

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

This sounded like fun, so I implemented it. From the looks of things, your css selector can be simplified. I think you only want the topmost list item to fade in and out, but it's not clear from the example. This example highlights the topmost node and does the fading correctly. I think this is the effect you were going for, but I'm not 100% sure. I didn't use the wait() functionality, as I'm not sure what it does do you.

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

Essentially, it sounds like the problem you are running into is that you are fading items in on hover out when you haven't left the list yet. You only want to fade in the list or other list items when you've entirely left the list. Don't use hoverIntent for that part, and handle the fading on the entire unordered list and it should be good to go.

示例: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 淡化/变暗其他列表元素，我在那里 90%..?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！