Jquery＆＃39; mouseenter＆＃39;什么也不做

Question

这是jquery

jQuery(document).on("ready page:load", function() {

var img = $('.img-profile')
var layer = $('.project-layer1')

layer.on('mouseenter', function() {
    $(this).animate({'transform' : 'scale(0.8)'}, 'slow');
});
layer.on('mouseleave', function() {
    $(this).animate({'transform' : 'scale(1)' }, 1000);
});
});

这是html

<div class="project-list">
<div class="project-list-container">
    <div class="project-layer1">
        <div class="project-desc">Tutor U</div>
        <div class="project-logo">
            <%= image_tag "233HHH.jpg", class: 'img-profile' %>
        </div>
    </div>
</div>

它在轨道中因此是image_tag ..但我不明白为什么当鼠标悬停时没有发生任何事情。

Answer 1

transform不是可以使用jQuery动画的属性。

您可以使用transition设置动画属性，例如

jQuery(document).on("ready page:load", function() {

  var img = $('.img-profile')
  var layer = $('.project-layer1')

  layer.on('mouseenter', function() {
    $(this).css({
      'transform': 'scale(0.8)'
    });
  });
  layer.on('mouseleave', function() {
    $(this).css({
      'transform': 'scale(1)'
    });
  });
});

.project-layer1 {
  transition: all ease 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-list">
  <div class="project-list-container">
    <div class="project-layer1">
      <div class="project-desc">Tutor U</div>
      <div class="project-logo">
        <img src="//placehold.it/64" />
      </div>
    </div>
  </div>

没有必要使用脚本来实现此效果，您只需使用:hover css规则

jQuery(document).on("ready page:load", function() {

  var img = $('.img-profile')
  var layer = $('.project-layer1')

});

.project-layer1 {
  transition: all ease 1s;
}
.project-layer1:hover {
  transform: scale(0.8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-list">
  <div class="project-list-container">
    <div class="project-layer1">
      <div class="project-desc">Tutor U</div>
      <div class="project-logo">
        <img src="//placehold.it/64" />
      </div>
    </div>
  </div>