jQuery обратный порядок .each()

Question

Я пытаюсь воспроизвести следующую анимацию в обратном порядке. Первоначальное раскрытие подменю прекрасно, однако я пытаюсь отменить его, когда он больше не вибрирует (так что продукт 4 исчезает сначала, затем 3, затем 2 и т. Д.)

HTML

<div class="postit-surround"> 
     <a href="#"> 
      <div class="postit"> 
       <div class="pin"> 
        <img src="assets/pin.png"> 
       </div> 
       <div class="postit-title"> 
        Products 
       </div> 
       <div class="corner-peel"> 
        <img src="assets/corner-flick-cyan.png"> 
       </div> 
      </div> 
     </a> 
     <div class="navigation-dropdown"> 
      <ul> 
       <li> 
        Products Page 1 
       </li> 
       <li> 
        Products Page 2 
       </li> 
       <li> 
        Products Page 3 
       </li> 
       <li> 
        Products Page 4 
       </li> 
      </ul> 
     </div> 
    </div> 

CSS

div.navigation-dropdown { 
    position: absolute; 
    top: 80px; 
    left: -5px; 
} 
div.navigation-dropdown > ul { 
    padding: 0px; 
    margin: 0px; 
    position: absolute; 
    top: 30px; 
    width: 140px; 
} 
div.navigation-dropdown > ul > li { 
    padding: 10px 10px 20px 10px; 
    list-style-type: none; 
    -webkit-transform: rotate(15deg); 
    transform-origin: 0% 0%; 
    -webkit-transform-origin: 0% 0%; 
    -ms-transform-origin: 0% 0%; 
    background-color: #aaaaaa; 
    margin-top: -10px; 
    margin-bottom: 5px; 
    border: 1px solid #eeeeee; 
    -webkit-transition: -webkit-transform 0.3s ease-out; 
    -moz-transition: -moz-transform 0.3s ease-out; 
    -o-transition:  -o-transform 0.3s ease-out; 
    -ms-transition:  -ms-transform 0.3s ease-out; 
    transition:   transform 0.3s ease-out; 
    cursor: pointer; 
} 
div.navigation-dropdown> ul> li:hover { 
    -webkit-transform: rotate(0deg); 
    transform-origin: 0% 0%; 
    -webkit-transform-origin: 0% 0%; 
    -ms-transform-origin: 0% 0%; 
    -webkit-transition: -webkit-transform 0.3s ease-out; 
    -moz-transition: -moz-transform 0.3s ease-out; 
    -o-transition:  -o-transform 0.3s ease-out; 
    -ms-transition:  -ms-transform 0.3s ease-out; 
    transition:   transform 0.3s ease-out; 
} 

JS

$("div.navigation-dropdown").children().children().hide(); 

$("div.postit-surround").hover(function(){ 

    var offset = 200; 
    function dropdown(x){ 
     setTimeout(function() { 
      $(x).fadeIn(500); 
     },$(x).index() * offset) 
    }; 

    $(this).find("div.navigation-dropdown > ul > li").each(function(){ 
     dropdown(this); 
    }); 
}, function(){ 

    var offset = 200; 

    function dropup(y){ 
    setTimeout(function() { 
      $(y).fadeOut(500); 
     },$(y).index() * offset) 
    }; 

    $($("div.navigation-dropdown > ul > li").get().reverse()).each(function() { 
     dropup(this); 
    }); 
}) 

Смотрите пример: http://jsfiddle.net/vVZy3/

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

Answer 1

Вы запуская событие в правильном порядке .reverse(), ваша проблема заключается в определении тайм-аут, который также должен быть перевернутой:

использование (4-$(y).index()) * offset

вместо $(y).index() * offset

ср http://jsfiddle.net/vVZy3/1/

P.S .: Возможно, вы захотите вычислить длину списка вместо жесткого кодирования 4, как я здесь.

Answer 2

Working Fiddle
Javascript Код

var totalLI = $("div.navigation-dropdown ul li").length; 

$("div.postit").hover(function (e) { 
    e.stopPropagation(); 
    $("div.navigation-dropdown ul li").each(function() { 
     $(this).fadeIn($(this).index() * offset); 
    }); 
    blockFadeOut = false; 
}, function (e) { 
    e.stopPropagation(); 
    $("div.navigation-dropdown ul li").each(function() { 
     $(this).fadeOut((totalLI - $(this).index()) * offset); 
    }); 
}); 

Your updated fiddle

---

Fiddle using stop() which solves the mouse slide problem

Надеется, что это помогает .....