0

divボタンがクリックされたときに拡大縮小しようとしている円があります。

<button id="2007">2007</button>
<div id="test2"></div>

私はそれを初心者のためにCSSでスタイリングしました：

#test2 {
  background-color: red;
  opacity:0.5;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  position: absolute;
  z-index:2;
}

そして、私のJSは、私が望むように、中央センターからdivサイズを減らすように機能します。

$("#2007").click(function(){
    $("#test2").effect("scale",{percent: 50},"1000");
});

問題は、スケール効果が終了するとすぐに、DIVが元のサイズに戻り、新しい位置にジャンプすることです。

DIVをスケーリングされた寸法に保ち、ジャンプして再配置するのを防ぐ方法を知っている人はいますか？

これがJSbinの例です。「2007」ボタンをクリックするだけで、何が起こっているかを確認できます。

編集：JSFiddleを追加しました

に変更.effectしてもまったく機能せず、ジャンプせず.animateに使用する方法があるはずですが、それでも困惑しています。.effectdiv

4

3 に答える 3

1

jQuery UIエフェクトは、完了後に元のプロパティを復元します。CSSを使用してみることができます。または.animate()、CSSの使用例を示します（http://jsfiddle.net/steelywing/JQdHf/3/）

$("#2007").click(function(){
    $("#test2").css({
        'transition': 'all 1s',
        'transform': 'scale(0.5)',
    });
});

更新：このライブラリ（https://github.com/rstacruz/jquery.transit）をご覧ください。これはリクエストに適していると思います=）

于 2013-03-07T03:45:34.933 に答える
0

callback効果が完了した後に実行される を提供してみてください。

ここで例を見ることができます：http://jsfiddle.net/mULWX/1/

于 2013-03-07T02:43:48.310 に答える