Question

我使用jQuery image-effect方法添加了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。为了使用伪类：悬停

<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/

CSS过渡Chrome问题

1 个答案: