CSS過渡Chrome的問題

我加入了使用jQuery addClass方法image-effect類和它的CSS是：CSS過渡Chrome的問題

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

高度的圖像是在所有的瀏覽器平穩地增大但不是在鉻上。

爲什麼？

來源

2012-12-24 Nida

也許將'1s'改爲'2s'？ – undefined

是的，當我把它保持爲1秒。它變得快速。客戶不滿意這一點。 – Nida

始終使用'transition：height 2s;'（不帶前綴）作爲最後一個。所以如果可以的話，它會使用那個而不是前綴版本。我會盡量找到我讀這篇文章的來源，但那是很久以前的事了。他們有一個很好的理由;） – Jelmer

請不要使用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/

來源

2012-12-24 10:56:17 Scipion

CSS過渡Chrome的問題

回答

相關問題