0

画像のズーム効果を実装しようとしています (overflow:hidden のコンテナー内にあるため、幅を広げて左にスライドさせるとうまくいくはずです)。

幅を広げることができました：

/* Zoom in images */
$('img.vectimg').load(function() {
    $(this).data('width', this.width);
}).bind('mouseenter mouseleave', function(e) {
    $(this).stop().animate({
        width: $(this).data('width') * (e.type === 'mouseenter' ?  1.2 : 1)
    });
});

しかし、左に移動するアニメーションを追加するにはどうすればよいですか? この / を追加しようとしましたが、うまくいきませんでした。

$(this).stop().animate({
            left: $(this).position().left  + 500
        });

私は完全な初心者なので、無理をしないでください:)

4

2 に答える 2

1

animate()同じ呼び出しで複数のプロパティを追加できます。

$(this).stop().animate({
    width: $(this).data('width') * (e.type === 'mouseenter' ?  1.2 : 1),
    left: $(this).position().left + (e.type === 'mouseenter' ? 500 : -500)
});

詳細: http://api.jquery.com/animate/

于 2012-12-02T20:55:41.580 に答える
1

animate()次のアニメーションにはjQuery コールバック関数を使用します。

こちらのドキュメントをご覧ください。

注:左、右のプロパティなどを操作するには、要素positionを(CSS で) に設定する必要があります。relative

于 2012-12-02T20:58:16.850 に答える