jquery scaleIn而不是fadeIn？

Question

我有一个简单的div元素项，我将动态地放置在另一个div中。

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

这很好，但我想用一个fadeIn效果代替scaleIn效果，即在屏幕上显示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;
}

联署材料：

$(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演示

在jQueryUI标度阅读更多内容