0

これが私の例です：http://jsfiddle.net/lcssanches/qtaUA/

$(" .inner_left, .inner_right ").hover(function() {
        $(this).css("z-index", "99999");
        $(this).stop(true,false).animate({ width: "240px",height: "180px" }, 250);
        $(this).css("background-color", "#D0D0D0");
    },function() {
        $(this).css("z-index", "");
        $(this).stop(true,false).animate({ width: "125px",height: "130px"   }, 250);
        $(this).css("background-color", "#ffffff");
});

3行の列のように、3つのdivがあります。

最初のdiv にカーソルを合わせると、上から下、右から左に成長します

3 番目のdiv にカーソルを合わせると、下から上、右から左に拡大します

問題は、2 行目にある div です。部分を上に、部分を下に成長させる必要があります。でもセンター固定。さて、この例では、上から下にのみ成長します。

私はすでに "top: -25px" int jQuery animate を入れようとしていますが、ラッパーの一番上に移動します。

ありがとう

説明する言葉が間違っていたらごめんなさい。

4

2 に答える 2

1

試してみてくださいtop-=25px;。その場合top:-25px、ページの上部を超えて上がるように設定しています。

于 2013-03-28T23:19:35.153 に答える
1

コードを次のように変更すると、問題が解決します。

このソリューションは、提供された絶対数と提供されたコードに固有のものであることに注意してください。

簡単に微調整して短くし、ソリューション全体で動的に機能させることができます。

私の意図は、これを回避する方法を示すことです。

HTML 部分:

<div class="wrapper">

    <div class="menu_right">
        <div class="item_right"><div class="inner_right"  style="top: 0px; right:0px;"><a href="#">1</a></div></div>
        <div class="item_right"><div class="inner_right" id="middleRow" style="top: 130px;  right:0px;"><a href="#">2</a></div></div>
        <div class="item_right" ><div class="inner_right"  style="bottom: 0px; right:0px;"><a href="#">3</a></div></div>
    </div>
</div>

JavaScript の部分:

$(" .inner_left, .inner_right ").hover(function() {
    var currentId = $(this).attr('id');
    if (currentId == "middleRow")  {
        var topPos = $(this).position().top - 25;
        var topPosPx = topPos + "px"; //or you could simply put 105px here specific to your code
        $(this).css("z-index", "99999");
        $(this).stop(true,false).animate({ width: "240px",height: "180px", top: topPosPx }, 250);
        $(this).css("background-color", "#D0D0D0");
    }
    else {
        $(this).css("z-index", "99999");
        $(this).stop(true,false).animate({ width: "240px",height: "180px" }, 250);
        $(this).css("background-color", "#D0D0D0");
    }
},function() {
        var currentId = $(this).attr('id');
    if (currentId == "middleRow")  {
        $(this).css("z-index", "");
        $(this).stop(true,false).animate({ width: "125px",height: "130px", top: "130px"   }, 250);
        $(this).css("background-color", "#ffffff");
    }
    else  {
        $(this).css("z-index", "");
        $(this).stop(true,false).animate({ width: "125px",height: "130px"   }, 250);
        $(this).css("background-color", "#ffffff");
    }
});

CSS については、jsfiddle.net コードで提供されている css を変更する必要はありません。

于 2013-03-29T00:12:24.350 に答える