带切换功能的 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
        });

    }

Answer 2

当您将回调函数传递给 .fadeIn() 时，回调将在动画完成后执行。您需要对此采取一些技巧：

function showCarMenuItems(carsDiv) {
    $(carsDiv).children().each(function(i) {
        var $this = $(this);
        setTimeout(function() {
            $this.fadeIn(5000);
        }, 500*i);
    });
}

http://jsfiddle.net/mattball/sRsTB/

---

编辑

为 @CnTwo 指出，您可以也可以使用 .delay() （它绝对比我的原始版本更干净）：

function showCarMenuItems(carsDiv) {
    $(carsDiv).children().each(function(i) {
        $(this).delay(500*i).fadeIn(5000);
    });
}

http://jsfiddle.net/mattball/K6mRv/

Answer 3

只需使用 jQuery .delay() 函数即可。

function showCarMenuItems(carsDiv) {
    var index = 0;

    $(carsDiv).children().each(function(i) {
        $(this).delay(2000*index++).fadeIn(7000);
    });

}

$('#cars').click(function() {
    showCarMenuItems(this);
});

在下面的示例中，每个跨度的淡入需要 7 秒才能完成，每个淡入在其后续淡入之前 2 秒开始。

这意味着：

   MODEL     STARTS  ENDS    
 - Honda        2     9    
 - Toyota       4     11    
 - Mitsubishi   6     13    
 - Kia          8     15  

http://jsfiddle.net/krmby/m4LPE/