jquery - CSS 过渡 Chrome 问题

Question

我使用 jQuery addClass 方法添加了 image-effect 类，它的 CSS 如下:

.image-effect img
{
  height:350px;
  transition: height 2s;
  -moz-transition: height 2s; /* Firefox 4 */
  -webkit-transition: height 1s; /* Safari and Chrome */
  -o-transition: height 2s;
   transition-timing-function: ease-in-out;
   -moz-transition-timing-function: ease-in-out
   -webkit-transition-timing-function: ease-in-out;
   -o-transition-timing-function: ease-in-out;
   }

jquery 是

     <script type="text/javascript">
     var jq = $.noConflict();
     jq(document).ready(function(){
     jq(".package-images").mouseover(function(){
     jq(this).addClass("image-effect");
     jq(".package-images").mouseout(function(){
     jq(this).removeClass("image-effect");
     });
    });
   });
   </script>

图像的高度在所有浏览器上平滑增加，但在 chrome 上没有。

为什么？

Answer 1

请不要使用 jquery。因为它使用伪类 :hover

<div class="package-images">
    <img src="..." />
</div>

这样的CSS:

.package-images img{
  height:200px;
  transition: height 2s ease-in-out;
  -moz-transition: height 2s ease-in-out; /* Firefox 4 */
  -webkit-transition: height 2s ease-in-out; /* Safari and Chrome */
  -o-transition: height 2s ease-in-out;
}
.package-images img:hover{
  height:350px;
}​

无论如何，如果你需要添加一个类名，你的javascript代码可以被重写:

var jq = $.noConflict();
jq(document).ready(function(){
    jq(".package-images").mouseover(function(){
        jq(this).addClass("image-effect");
    }).mouseout(function(){
        jq(this).removeClass("image-effect");
    });
});​

http://jsfiddle.net/UZJdM/3/