9

ボタンからポップアップdivを探しています。ボタンがクリックされたときに、ポップアップがボタンの中央から外側に大きくなると同時に、画面の中央にスライドするようにします。これはそれほど難しいことではないと思いますが、どこにもスニペットが見つかりません。どんな助けでも大歓迎です。

Jamie Dixonの助けを借りて、このコードを機能させることができました。

$('#grower').css({
    backgroundColor: '#FFFFFF',
    border: '10px solid #999',
    height: '0px',
    width: '0px',
    color: '#111111',
    fontWeight: 'bold',
    padding: '10px',
    display: 'none',
    position: 'absolute',
    left: $(this).position().left,
    top: $(this).position().top
}).appendTo('#overlay').fadeIn(0).animate({
    position: 'absolute',
    height: '200px',
    width: '600px',
    marginTop: '-120px',
    marginLeft: '-320px',
    display: "",
    top: ((($(parent).height() - $(this).outerHeight()) / 2) + $(parent).scrollTop() + "px"),
    left: ((($(parent).width() - $(this).outerWidth()) / 2) + $(parent).scrollLeft() + "px")
}, 1000);
4

1 に答える 1

20

「scale」をパラメーターとして渡すshowメソッドでjQueryUIを使用できます。

 $('#growwer').show("scale",{}, 1000);

実例

要素をページの中央にスライドさせるために、ここにあるTonyLのjQuery関数の修正バージョンを作成しました。jQueryを使用してDIVを画面の中央に配置します。

実例

アップデート

同時に実行される2つのアニメーションの実例を次に示します。

http://jsfiddle.net/wNXLY/1/

これを機能させるために、animate渡す関数に追加のパラメーターを含めました。{duration: durationLength, queue: false}

于 2012-04-27T13:25:14.967 に答える