Question

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

我需要显示淡入/淡出效果的菜单项，但无论我尝试什么，我都无法得到我想要的东西。例如：

用户点击“汽车”菜单。这将显示汽车链接的淡出时尚： a）本田（淡入） b）丰田（1秒后淡出） c）三菱（2秒后淡出） d）起亚（3秒后褪色） ....
当用户点击另一个链接“摩托车”时，网站淡入菜单现在应该从最后一个项目（即起亚）开始淡出。

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

我尝试过递归，即

       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

将回调函数传递给.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 points out，您也可以使用.delay()执行此操作（它绝对比原始版本更清晰）：

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

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

Answer 2

在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 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/

使用Toggle进行JQuery淡入/淡出菜单

3 个答案:

修改