JQuery Fade In / Out меню с переключателем

Question

Я немного застрял здесь, как я могу реализовать следующее меню постепенного исчезновения / входа.

Мне нужно показать пункты меню с эффектом постепенного исчезновения, но что бы я ни пытался, я не получил то, что искал. Пример:

1. Пользователь нажимает на меню «Автомобили». Это покажет ссылки автомобилей в моде: а) хонда (въехать) б) Тойота (исчезает через 1 секунду) в) Mitsubishi (исчезает через 2 секунды) г) Киа (исчезает через 3 секунды) ....

2. Когда пользователь нажимает на другую ссылку "Мотоциклы", меню исчезновения веб-сайта теперь должно начинать исчезать с последнего элемента (т.е. Kia).

Мне нужно, чтобы поведение перехода / выхода происходило для следующего элемента, пока предыдущий все еще исчезает / входит. Мне нужно добиться этого постепенного эффекта. Кроме того, мне нужно контролировать скорость отображения / скрытия пунктов меню.

Я пробовал рекурсию, т.е.

       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

Попробуйте метод delay в jQuery, должно быть то, что вам нужно.

задержка

Возможно, измените код на что-то вроде:

   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/