小编HJ0*_*J05的帖子

我正在尝试构建一个带有揭示动画的菜单,有点像卡片动画.

整个菜单项堆栈从相同的位置开始,然后随着堆栈的移动,各个菜单项目一直停在目的地,直到最后一个项目到达目的地.

我几乎在这里工作:http://jsfiddle.net/XVuPQ/2/

for(var j = 0; j < topItems; j++) {
    $col2.append(
        $('<div>')
            .addClass('absColItem')
            .css({
                'top': $(this).position().top + 22,
                'left': '-100px'                    
            })
            .animate({
                'left': 0
            }, 100)
            .animate({
                'top': ($(this).position().top + 22) - (j * (itemHeight + 10))
            }, (j + 1) * 500)
            .data('parent', $(this))

    );
}

但是物品的时间并没有按照我想要的方式排列.

有没有人对如何实现这种效果有任何想法？

编辑 - 到目前为止的答案是有帮助的,但这是一个粗略的动画,我正在努力实现.

我有一个大的div,里面有一个小图像.当我将鼠标悬停在div上时,我想让图像褪色,即使鼠标没有直接在图像本身上方.

div比图像大得多,所以我不会在图像周围添加透明度或更改图像大小或类似的东西.

当鼠标悬停在div上时,我只想让它消失.

这是我到目前为止的代码,但它没有用处:

<div id="left">
    <img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>

CSS

#left {
    background-color: #f0f0ee;
    float: left;
    width: 50%;
    min-height: 100%;
}

#logoLeft {
    float: right;
    margin-top: 2.5em;
}