Jquery CSS 3-缩放CSS转换

我正在尝试缩放一个图像，当你鼠标移动时，它正在工作。我希望图像能逐渐放大，过渡更轻松。我用的是易入易出，但它不起作用。有什么建议吗

另外，我在jquery代码中使用了addClass和removeClass两次。有没有办法只使用一次

谢谢

 <style>
    .image {
      opacity: 0.5;
    }

    .image.opaque {
      opacity: 1;
    }

    .size{
    transform:scale(1.2);
    -ms-transform:scale(1.2); /* IE 9 */
    -webkit-transform:scale(1.2); /* Safari and Chrome */
    -webkit-transition: scale 2s ease-in-out;
    -moz-transition: scale 2s ease-in-out;
    -o-transition: scale 2s ease-in-out;
    -ms-transition: scale 2s ease-in-out;    
    transition: scale 2s ease-in-out;
     transition: opacity 2s;
      }
  </style>



 <script>
    $(document).ready(function() {

      $(".image").mouseenter(function() {
        $(this).addClass("opaque");
        $(this).addClass("size");
      });

      $(".image").mouseleave(function() {
       $(this).removeClass("opaque");
        $(this).removeClass("size");
      });

    });
 <div id="gallery">
    <h3>Gallery of images</h3>
    <img class="image" src="images/gnu.jpg" height="200px" width="250px">
    <img class="image" src="images/tiger.jpg" height="200px" width="250px">
    <img class="image" src="images/black_rhino.jpg" height="200px" width="250px">
    <img class="image" src="images/cape_buffalo.jpg" height="200px" width="250px">
  </div>

.形象{
不透明度：0.5；
}
.image.不透明{
不透明度：1；
}
.尺寸{
转换：比例（1.2）；
-ms变换：比例（1.2）；/*IE 9*/
-webkit转换：缩放（1.2）；/*Safari和Chrome*/
-webkit转换：缩放2秒轻松输入输出；
-moz转换：缩放2s缓进缓出；
-o-转换：刻度2缓进-缓出；
-ms转换：缩放2秒轻松输入输出；
转换：缩放2秒，轻松输入输出；
过渡：不透明度2s；
}
$（文档）.ready（函数（）{
$（“.image”）.mouseenter（函数（）{
$（此）.addClass（“不透明”）；
$（此）.addClass（“大小”）；
});
$（“.image”）.mouseleave（函数（）{
$（此）.removeClass（“不透明”）；
$（此）.removeClass（“大小”）；
});
});
图像画廊

如果要使用jQuery而不是css:hover。将比例函数移动到另一个类。如何编写转换也存在问题

.size{
    -webkit-transition: 2s ease-in-out; //does not accept property like scale, opacity here
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    -ms-transition: 2s ease-in-out;    
    transition: 2s ease-in-out;
     transition: 2s;
      }

.scaledSize{
transform:scale(1.2);
-ms-transform:scale(1.2); /* IE 9 */
    -webkit-transform:scale(1.2); /* Safari and Chrome */    
}

修改jQuery代码以添加和删除此类

如果要使用不同的计时功能和持续时间设置属性动画，则必须编写单独的css属性：

转换属性

，

转换计时功能

，

转换持续时间

。像这样：

.size{
    opacity: 0.5;
    transition-property: scale, opacity;
    transition-timing-function: ease-in-out, linear;
    transition-duration: 2s, 2s;
    }

使用您的代码，您可以尝试：

<style>
    .image {
      transition-property: scale, opacity;
      transition-timing-function: ease-in-out, linear;
      transition-duration: 2s, 2s; 
      opacity: 0.5;
    }

    .image.opaque {
      opacity: 1;
    }

    .size{
    transform:scale(1.2);
    -ms-transform:scale(1.2); /* IE 9 */
    -webkit-transform:scale(1.2); /* Safari and Chrome */
   }
  </style>

 <script>
    $(document).ready(function() {

      $(".image").mouseenter(function() {
        $(this).addClass("opaque");
        $(this).addClass("size");
      });

      $(".image").mouseleave(function() {
       $(this).removeClass("opaque");
        $(this).removeClass("size");
      });

    });
 <div id="gallery">
    <h3>Gallery of images</h3>
    <img class="image" src="images/gnu.jpg" height="200px" width="250px">
    <img class="image" src="images/tiger.jpg" height="200px" width="250px">
    <img class="image" src="images/black_rhino.jpg" height="200px" width="250px">
    <img class="image" src="images/cape_buffalo.jpg" height="200px" width="250px">
  </div>

.形象{
过渡特性：比例、不透明度；
过渡定时功能：易进易出，线性；
过渡时间：2s，2s；
不透明度：0.5；
}
.image.不透明{
不透明度：1；
}
.尺寸{
转换：比例（1.2）；
-ms变换：比例（1.2）；/*IE 9*/
-webkit转换：缩放（1.2）；/*Safari和Chrome*/
}
$（文档）.ready（函数（）{
$（“.image”）.mouseenter（函数（）{
$（此）.addClass（“不透明”）；
$（此）.addClass（“大小”）；
});
$（“.image”）.mouseleave（函数（）{
$（此）.removeClass（“不透明”）；
$（此）.removeClass（“大小”）；
});
});
图像画廊

我在前面的一个例子中使用了hover，效果非常好。然而，我们的教授希望我们使用css+jquery。我不能用悬停。最后一个成功了。谢谢你为我澄清这一点！