【问题标题】:Shrink/Grow animation using jQuery/CSS使用 jQuery/CSS 缩小/增长动画
【发布时间】:2012-10-30 17:52:27
【问题描述】:

如何使用 jQuery 和/或 CSS 实现增长/收缩动画?当您单击Join Now 按钮时,我能想到的一个示例是this

我查看了animate.css,但他们没有提供这样的动画。

【问题讨论】:

  • 有大量的 jquery modal 插件可用。一点谷歌搜索可能会出现“30 种最佳模式”或类似内容。也称为dialog
  • 我自己创建了模态,现在我想用“收缩”动画为模态设置动画。
  • 易于使用 jQuery 实现 animate() 方法 api.jquery.com/animate 使用您想要的任何 css 属性。还有一些内置效果,如slideUp()slideDown()。也请查看插件的来源。效果 API:api.jquery.com/category/effects
  • 我在页面的任何地方都看不到现在加入文本
  • @defau1t geeesh..try ctrl+F

标签: javascript jquery css animation jquery-animate


【解决方案1】:

DEMO — 使用 CSS3 的 transition-duration (W3Schools) 和 transform:scale(X,Y); (W3Schools) 的解决方案。

更新:

DEMO — 更进一步,不仅仅是在动画末尾添加 display:none;(通过 jQuery .hide())更改为 opacity:0;

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-02
    • 1970-01-01
    • 1970-01-01
    • 2010-12-12
    • 1970-01-01
    • 2012-03-19
    相关资源
    最近更新 更多