CSS过渡Chrome问题

Question

我已经添加了image-effect类使用jQuery addClass方法和它的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/