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

希望它有所帮助.....

.Query（）的jQuery反向排序

2 个答案: