jquery scaleIn 而不是 fadeIn？

Question

我有一个简单的 div 元素项目，我正在将其动态放置在另一个 div.

中

var item = document.createElement('div')
$(item).hide().appendTo($('#container')).fadeIn()

这很好用，但我想用 scaleIn 效果替换 fadeIn 效果，即项目以 0 比例出现在屏幕上，然后动画到 1 比例。

有没有办法做到这一点？

Answer 1

您可以使用jQuery UI来创建这样的效果，下面是一个示例。

HTML:

<p>Click the Buttons!</p>

      <button id = "hide"> Hide </button>
      <button id = "show"> Show</button> 

      <div class = "target">
</div>

CSS:

p {
  width:200px; border:1px solid green;
}

div{ 
   width:100px; height:100px; background:red;
}

JS:

$(document).ready(function() {

   $("#hide").click(function(){
      $(".target").hide( "scale", {percent: 200, direction: 'horizontal'}, 2000 );
   });

   $("#show").click(function(){
      $(".target").show( "scale", {percent: 200, direction: 'vertical' }, 2000 );
   });

});

CODEPEN DEMO

在 jQueryUI Scale

上阅读更多内容

jquery scaleIn 而不是 fadeIn？

jquery scaleIn instead of fadeIn?

jquery

transition

jquery-animate