jquery - jqueryで拡大すると、ホバー時にGoogleChromeで画像が振動します

Question

私は現在、画像ギャラリーに取り組んでいます。Google Chromeを除いて、一番上の行にカーソルを合わせると、下の行が振動して動き始めます。ここで実用的な例を見つけることができます。

HTML：

     <div id="gallery">
             <a href="<?php echo'?img=$imgname';?>"  > 
                           <span c

lass="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                      <a href="<?php echo'?img=$imgname';?>" >
                       <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                         <a href="<?php echo'?img=$imgname';?>" > 
                         <span class="title"><?php echo'$imgtitle';?></span>
                            <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                        <a href="<?php echo'?img=$imgname';?>" > 
                        <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                      <a href="<?php echo'?img=$imgname';?>"  >
                       <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                         <a href="<?php echo'?img=$imgname';?>" > 
                         <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                      <a href="<?php echo'?img=$imgname';?>"  >
                       <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                         <a href="<?php echo'?img=$imgname';?>"  >
                          <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                         <a href="<?php echo'?img=$imgname';?>"  >
                          <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                        <a href="<?php echo'?img=$imgname';?>"  > 
                        <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                         <a href="<?php echo'?img=$imgname';?>"  > 
                         <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
    </div>

CSS

#gallery {
    width: 100%; 
    margin-top: 100px;
    padding-bottom: 100px;
    display:block;
    text-align:center;
}

#gallery a {
    display: inline-block;
    margin: 0 12.5px 25px 12.5px;
    position: relative;
    height:150px;
    width:225px;
}

#gallery a img {
    height:150px;
    width:225px;
    position:relative;
}

Jquery

$(document).ready(function() {  
     $("#gallery a img").hover(function(){
            $(this).css({"z-index":"99"}); 
             $(this).stop(true, false).animate({ "margin-left":"-112.5px",
                    "margin-top":"-150px",
                    "bottom":"-75px",
                    "height":"300px",
                    "width":"450px"
                    });
        }, function() {
        $(this).css({"z-index":"0"}); 
             $(this).stop(true, false).animate({"height":"150px",
                    "width":"225px",
                    "margin-left":"0px",
                    "margin-top":"0px",
                    "bottom":"0px"
                 });
        });
});

PSズームアウトすると、目立ちます。

助けてくれてありがとう。

Answer 1

ベース画像を複製して拡大するのが最善の方法だと思います。

 $(function() {  
         $("#gallery a img").mouseenter(function(){
           var d = $(this).clone().addClass('preview')
           .css({position:'absolute',top:$(this).position().top, left:$(this).position().left,zIndex:99})
           .insertAfter($(this)).animate({ "margin-left":"-112.5px",
                        "margin-top":"-150px",
                        "bottom":"-75px",
                        "height":"300px",
                        "width":"450px" 
}).mouseleave(function(){
           $(this).animate({"height":"150px",
                        "width":"225px",
                        "margin-left":"0px",
                        "margin-top":"0px",
                        "bottom":"0px"
                                             },
                        function(){$(this).remove()});
            })
           });
    });

jsfiddleで試してみてください。

Answer 2

これにより、すべての画像が少し右に移動します（つまり、少し余分な作業が必要になります）が、画像を絶対に設定すると、振動がなくなります。

#gallery a img {
height:150px;
width:225px;
position:absolute;
}

Answer 3

z-index復元（ゼロに​​戻す）をアニメーションコールバックに移動してみてください。

// ...   
$(this).stop(true, false).animate({"height":"150px",
    "width":"225px",
    "margin-left":"0px",
    "margin-top":"0px",
    "bottom":"0px"
}, function(){
    // Do this last
    $(this).css({"z-index":"0"}); 
});
// ...

jsfiddleは、何らかの理由で今日私のために機能していません。または、私は1つをまとめます。

Answer 4

交換 ：

#gallery a {
display:inline-block;
/* ... */
} 

と

#gallery a {
display:block;
float:left;
/* ... */
}

Answer 5

私はあなたたちの助けを借りて問題を修正しました。私がしなければならなかったのはこれを変えることだけでした：

    // ...   
$(this).stop(true, false).animate({"height":"150px",
    "width":"225px",
    "margin-left":"0px",
    "margin-top":"0px",
    "bottom":"0px"
}, function(){
    // Do this last
    $(this).css({"z-index":"0"}); 
});
// ...

これに：

#gallery a img {
height:150px;
width:225px;
position:absolute;
left:0px;
}