1

画像をアニメーション化して大きくしようとしています。サイズを変えてもらいましたが、周りの要素が動かないようにしようとしています。私はアニメーションを行うためにjQueryを使用していますが、何らかの理由でマージンのすべてのステップが増加しません。それが終わった後にだけそれをします。jQueryのドキュメントを正しく読んだと思いました。これまでの私のコードは次のとおりです。

$(document).ready(function(){
    $(".image").mouseenter(function(){
        $(this).animate({height: "176px", width: "250px"},
            {
            step: function(now, fx) {
                $(this).css("margin-left","-=0.076");
                $(this).css("margin-right","-=0.084");
                $(this).css("margin-bottom","-=0.152");
            }
        });
    });
    $(".image").mouseleave(function(){
        $(this).animate({height: "100px", width: "174px"},
            {
            step: function(now, fx) {
                $(this).css("margin-left","+=0.076");
                $(this).css("margin-right","+=0.084");
                $(this).css("margin-bottom","+=0.152");
            }
        });
    });
});
4

2 に答える 2

1

あなたのhtmlがなければ、それを伝えるのは難しいですが、私はあなたがそれを難し​​い方法でやっていると思います。可能な限りcssとhtmlを使用してから、javascriptについて心配することをお勧めします。画像と同じサイズのコンテナを作成する場合は、通常の方法を使用して画像をコンテナ内の中央に配置し、CSSの中央に配置することができますが、アニメーション化することができます。また、これらのアニメーションを処理する関数を作成して、使いやすくします。

ここで簡単なデモを確認してください：jsfiddle（かわいい子猫が含まれています）

$('img').animate({
    width: 200,
    height: 150,
    top: 0,
    marginTop: '75px', // heigth / 2
    marginLeft: '100px' // width / 2
});
于 2012-04-23T23:36:13.760 に答える
1

CSS3アニメーションを試してください：

img{
-webkit-transform:scale(0.6); /*Webkit: Scale down image to 0.6x original size*/
-moz-transform:scale(0.6); /*Mozilla scale version*/
-o-transform:scale(0.6); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}

.hovergallery img:hover{
-webkit-transform:scale(0.9); /*Webkit: Scale up image to most of the original size*/
-moz-transform:scale(0.9); /*Mozilla scale version*/
-o-transform:scale(0.9); /*Opera scale version*/
}

上記は、ホバー時に画像を拡大縮小します。

于 2012-04-24T00:18:47.553 に答える