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

P.S。如果你缩小更多，那就更明显了。

提前感谢您的帮助。

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

尝试将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

这会将所有图像向右移动一点（所以只需要一些额外的工作），但将图像设置为绝对可以消除振动。

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

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;
}

当使用jquery放大时，图像在悬停时在Google Chrome中振动

5 个答案: