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？

1 个答案: