1

私は20の異なるdivを持っています。

5 class = "icon"、

5 class = "rainskin"、

4 class = "schoolproject"、

4 class = "wallpaper"、＆

2 class="その他"。

各divには、class="。type"のdivが1つあります。.type divのヘッダー部分（約27ピクセル）が表示されていますが、残りは非表示になっています。誰かが.typedivにカーソルを合わせると、上にスライドします（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));

誰かが1つの.typedivにカーソルを合わせ、最初の.type divが下にスライドする前に、別の.type divにカーソルを合わせない限り、これは完全に正常に機能します。次に、.icon、.rainkin、.schoolprojectなどのdivが少し下に移動します。私のフィドルに行って、自分でチェックしてください。なぜそれをしているのか分かりません。

4

1 に答える 1

1

「margin-top」を使用すると、実際にはcss divのフローが混乱するため、「top」を使用する場合は、位置がそのdivにのみ適用されるため、.typeを「relative」として設定する必要もあります。もう1つ、元の位置は「0」にすることができ、引き上げる量は.typedivのサイズにすることができます。

この変更を確認してください。

（ここでテスト：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 に答える