Question

我有一些以图像为背景的div，这个背景正在放大悬停效果。但这种缩放效果并不顺畅。是否有可能在脚本中添加一些内容以使此缩放效果平滑？这是我的HTML：

<div class="eventc" style="height: 476px;">
 <a title="#" href="#" class="under">
   <div style="background: transparent url(...) no-repeat scroll center center / cover ;" class="over-img">
     <div class="over">
      <div class="over-text">
       <div class="event-title">#</div>
      </div>
     </div>
   </div>
 </a>
</div>

我的脚本看起来像这样：

jQuery(function($) {
    $('.over').hover(function() {
      $(this).parent().css('background-size', '150%');
    }, function() {
    // on mouseout, reset the background size
    $(this).parent().css('background-size', 'cover');
    });
});

因此当.over悬停时，我希望.over-img能够顺利缩放。任何想法，我该怎么做？提前谢谢！

编辑：http://jsfiddle.net/kpvqL4bh/

EDIT2：像这样的平滑效果：http://ringana.biz/de/（悬停在某些img上进行检查）

Answer 1

你可以使用CSS3来表现性感，例如

 transition: background-size 0.5s ease;

会给出一个动画＆＃39;每当背景大小改变时。

编辑：忘了说你显然必须在隐藏background-size属性本身的元素中使用这个属性。

在此处查看更多内容：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

平滑缩放jquery

1 个答案: