圖片在使用jquery進行放大時懸停在Google chrome上的圖像

Question

我目前正在圖像庫中工作。除了在谷歌瀏覽器中，當您將鼠標懸停在頂部行上時，它會正常工作，下面的行將開始震動並移動。你可以找到一個工作示例here。

的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" 
       }); 
     }); 
}); 

附：如果你縮小更多，它更引人注目。

在此先感謝您的幫助。

Answer 1

我固定的問題與你的球員的幫助。我所要做的就是改變這種：

// ... 
$(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; 
} 

Answer 2

嘗試將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沒有工作對我來說今天由於某種原因，或者我把一個在一起。

Answer 3

我認爲最好的選擇是複製你的基礎圖像並放大它。

$(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 4

這會將所有圖像向右移動一點（所以只需稍加額外的工作），但將圖像設置爲絕對可以擺脫對我的振動。

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

Answer 5

取代：

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

與

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