0

I am trying to scale an image when you mouseenter, which is working. I would like the image to gradually scale up with an ease transition. I used ease-in-out, which it's not working. Any suggestions?

Also, I used addClass & removeClass twice in the jquery code. Is there a way to only use it once?

Thanks!

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

1 回答 1

0

如果你想使用 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 属性：transition-property, transition-timing-function, transition-duration. 像这样：

.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>
于 2013-11-03T03:46:17.600 回答