jquery - jQueryでコーナーからコーナーへの表示アニメーション?

Question

アニメーションがからdisplay:none;に移動する相対位置の div をアニメーション化する必要がありdisplay:block;ます。右下隅から左上隅に向かって「スケーリング」する必要があります。これを行う方法はありますか？(できればjQueryですが、動作するものは何でも良いです)

score 1 · Accepted Answer

フェードインしたり、要素のサイズを変更したりするかどうかはわかりません。それを隠さないようにする必要があるようです。

HTMLレイアウトはすべて上と左から行われるため、右下から左上にアニメーション化するものを取得することは、控えめに言っても注意が必要です。

位置を固定または絶対的に慎重に組み合わせることslideUpで、要素を下から上に表示することができます。しかし、最先端のインクルードを備えた非常に高度なjQueryを使用せずに、右から左にスライドする方法については聞いたことがありません。slideDown

だから私はこの解決策を提供します：あなたが見せようとしているdivは相対的な位置にあるので、おそらく何らかのラッパーを持っているか、簡単に配置できます。

ラッパーを配置するoverflowと、ルールを非表示に設定してから、「非表示」のdivを境界の外側に配置できます。

これで、単純なjQueryアニメーションを使用して、ラッパーの境界内に再配置することで「表示」することができます。

次に例を示します。

HTML：

<div class='wrapper'>
    <div class='growIt'>Text for div</div>
</div>
<input type='button' id='showHide' value='Show / Hide'/>

CSS：

.wrapper{
    background:blue;
    position:relative;
    width:200px;
    height:200px;
    overflow:hidden;
}
.growIt{
    background: red;
    position:relative;
    width:200px;
    height:200px;
    top:200px;
    left:200px;
    display:block;
}

jQuery：

$(function(){
    var hiding = true;
    $('#showHide').click(function(){
        if(hiding == true){
            hiding = false;
            $('.growIt').animate({top:'0px',left:'0px'},2000);    
        }else{
            hiding = true;
            $('.growIt').animate({top:'200px',left:'200px'},2000);    
        }
    });
});

ボタンをクリックすると、赤いdivが非表示または表示されます。

display:noneからへのアニメーション化の要件が、display:block他のフォーム要素を表示時に邪魔にならないようにプッシュする必要があるためである場合は、別のラッパーを追加してposition:relativeから、ラッパーを下から「下」にスライドさせることをお勧めします。