jquery - 他の画像の位置に影響を与えずにマウスオーバーで画像をズームするにはどうすればよいですか？（JQuery）

Question

他の画像の元の位置に影響を与えることなく、任意の画像にマウスオーバーすると、画像がポップして前面に表示される、Google画像と同様の効果を取得したいと思います。また、これはカーソルが静的な場合にのみ発生し、ランダムに移動している場合には発生しません。

画像をズームしようとしましたが、他の画像が元の位置を失っています。私のコードは次のようになります->

$("img").mouseover(function(){
      $(this).css("cursor","pointer")
      $(this).animate({zoom: '107%'}, 'fast')

   }).mouseout(function(){
      $(this).animate({zoom: '100%'}, 'fast') 

   });

Answer 1

ズームする画像のCSSaddZ-indexで、画像はz座標でポップします。他の画像のz-indexがホバーされたものよりも小さい間、画像がポップアップするようにZ-indexを変更するという考え方です。これにより、他の画像の位置に影響を与えることはありません。

$("img").mouseover(function(){
      $(this).css("z-index","2")
}

更新：遅延の例

$(function() {
        var timer;

        $('img').hover(function() {
                if(timer) {
                        clearTimeout(timer);
                        timer = null
                }
                timer = setTimeout(function() {
                        $(this).css("z-index","2"), 2000)
    },
    // mouse out
         clearTimeout(timer);
         $(this).css("z-index","1")
    });
});

このようなことを試してみてください、ここの投稿をチェックしてください

Answer 2

<img style="position:absolute">

imgスタイルのプロパティの位置を絶対に変更する