2

jQuery を使用してアニメーション化する方法を学習し始めたばかりで、私が抱えている小さな美的問題の解決策 (もしあれば) を見つけるのに苦労しています。

ここに私が取り組んでいるコードがあります:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script> 
$(document).ready(function(){
$(".cause_button").css("cursor","pointer");
$(".cause_button").on('mouseenter',function(){
  $(this).stop().animate({height:100, width:100, opacity:1.0}, "fast");
});
$(".cause_button").on('mouseleave',function(){
  $(this).stop().animate({height:75, width:75, opacity:.75}, "fast");s
});
});
</script>

これは、".cause_button" のクラスを持つ画像の非常に単純なホバー イン/アウト アニメーションです。アニメーションはうまく機能しますが、幅/高さが右下に拡大されます。画像をすべての方向に外側に拡大する方法はありますか?

jsFiddle: http://jsfiddle.net/FHkw2/1/

PS: 遷移効果を使用する CSS3 の代替手段があることは理解していますが、それらは同じ結果を達成し、ブラウザーとの互換性が低いように思われるため、これには jQuery の使用に集中しようとしています。

4

3 に答える 3

2

アニメーション中に「上」および「左」属性を変更します。

$(".cause_button").on('mouseenter',function(){
    $(this).stop().animate({height:100, width:100, opacity:1.0, left: -13, top: -13}, "fast");
});
$(".cause_button").on('mouseleave',function(){
  $(this).stop().animate({height:75, width:75, opacity:.75, left: 0, top: 0}, "fast");
});

ここで確認してください：http://jsfiddle.net/FjNy5/2/

そして、ドキュメントのように on() を使用することをお勧めします。

$(".cause_button").on({
    'mouseenter': function(){
        $(this).stop().animate({height:100, width:100, opacity:1.0, left: -13, top: -13}, "fast");
    }, 
    'mouseleave': function(){
        $(this).stop().animate({height:75, width:75, opacity:.75, left: 0, top: 0}, "fast");
    }
});

ここで確認してください：http://jsfiddle.net/ETu3A/

于 2013-03-21T22:29:25.870 に答える
0

これを試して：

$(document).ready(function(){
  $(".cause_button").css("cursor","pointer");
  $(".cause_button").css("position","relative"); // required for offset positioning
  $(".cause_button").on('mouseenter',function(){
    $(this).stop().animate({
      left: -12.5, top: -12.5,
      height:100, width:100, opacity:1.0}, "fast");
  });
  $(".cause_button").on('mouseleave',function(){
    $(this).stop().animate({
      left: 0, top: 0,
      height:75, width:75, opacity:.75}, "fast");
  });
});
于 2013-03-21T22:30:17.120 に答える
0

display:absoluteボタンを に設定し、 を使用するコンテナ要素でラップすると、おそらくより良い結果が得られますdisplay:relative。次に、アニメーション中にボタン要素の css left および right プロパティを調整します。このような状況では、「開始位置」の要素にいくつかの初期スタイルを設定してから、変更されない css を css ファイルに入れることを好みます。

このアイデアをデモし、それらのポイントを説明するのに役立つjsfiddleを次に示します。

于 2013-03-21T22:38:29.777 に答える