2

image-effectjQuery メソッドを使用してクラスを追加しまし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>

画像の高さはすべてのブラウザでスムーズに増加しますが、クロムでは増加しません。

なんで？

4

1 に答える 1

4

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/

于 2012-12-24T10:56:17.480 に答える