fadein - 带切换功能的 JQuery 淡入/淡出菜单

Question

我对如何实现以下淡入/淡出菜单有点困惑。

我需要显示具有淡入/淡出效果的菜单项，但是无论我尝试什么，我都没有得到我想要的东西。示例:

1. 用户单击菜单“汽车”。这将显示汽车链接在时尚中的淡出:a) 本田(淡入)b) 丰田(1秒后淡出)c) 三菱(2秒后淡出)d) Kia(3秒后淡出)....

2. 当用户点击另一个链接“摩托车”时，网站淡入菜单现在应该开始从最后一项(即起亚)淡出。

我需要在下一个项目仍在淡出/淡入时发生淡入/淡出行为。我需要达到这种渐进的效果。另外，我需要控制菜单项显示/隐藏的速度。

我尝试了递归，即

       function showCarMenuItems(carsDiv){
            var items =  $(carsDiv).children();     
            displayMenu(items, 0);
       }; 

       function displayMenu(items, i){
            var interval = 500;
            $(items[i]).fadeIn(interval, function(){
                if(i < items.length)
                {
                    displayMenu(items, i++);
                }
            });

        }

尽管它给了我一个接近的行为，但项目的显示并不像我需要的那样渐进。也就是说，一旦第一个汽车项目完全出现，那么下一个就会显示，等等。我需要一个汽车项目几乎显示出来，另一个应该已经开始显示(淡入)。

请帮忙。

谢谢，游击队

Answer 1

尝试一下 jQuery 中的 delay 方法，应该就是您所需要的。

delay

也许将代码更改为:

   function showCarMenuItems(carsDiv){
        var items =  $(carsDiv).children();     
        displayMenu(items);
   }; 

   function displayMenu(items, i){
        var interval = 500;
        var nextInterval = 400;
        $(items).each(function(){
            $(this).fadeIn(interval).delay(nextInterval); //will start the fadeIn, but wait 400 before moving on
        });

    }