1

我有 20 个不同的 div。

5类=“图标”，

5类=“雨皮”，

4类=“学校项目”，

4类=“壁纸”，&

2类=“杂项”。

每个 div 都有一个 class=".type" 的 div。我显示了 .type div 的标题部分（大约 27 像素），但其余部分被隐藏了。当有人将鼠标悬停在 .type div 上时，它会向上滑动（通过将 margin-top: 更改为 0px）。当鼠标不再悬停时，它会回到原来的位置（margin-top：110px）。

这是我的小提琴。和java代码。

(function ($) {
    var original = [];
    $('.type').each(function (i) {
        original.push($(this).css('margin-top'));
    });
    $('.type').hover(function (e) {
        $(this).stop().animate(
            {"margin-top" : (
                $(this).parent().outerHeight() - 
                $(this).outerHeight()
            )},
            250
        );
    }, function (i){
        var i = $('.type').index($(this));
        $(this).stop().animate(
            {"margin-top": original[i]},
            250
        );
    });
}(jQuery));

它工作得非常好，除非有人将鼠标悬停在一个 .type div 上，然后在第一个 .type div 向下滑动之前将鼠标悬停在另一个 .type div 上。然后 .icon、.rainkin、.schoolproject 等 div 向下移动了一点。去我的小提琴，自己检查一下。我不知道它为什么这样做。

4

1 回答 1

1

当您使用“margin-top”时，实际上是在弄乱 css div 的流程，因此如果您使用“top”，则位置仅适用于该 div，您还需要将 .type 设置为“相对”。另一件事，您的原始位置可以只是“0”，而上拉的数量可以是您的 .type div 的大小。

检查此修改：

（在这里测试：http: //jsfiddle.net/gfefN/9/）

(function ($) {
    var original = [];
    $('.type').each(function (i) {
        original.push(0);
    });
    $('.type').hover(function (e) {
        $(this).stop().animate(
            {"top" : -(
                $(this).height()
            )},
            250
        );
    }, function (i){
        var i = $('.type').index($(this));
        $(this).stop().animate(
            {"top": original[i]},
            250
        );
    });
}(jQuery));
于 2013-03-26T21:10:16.580 回答