从右上角增长div?

2024-04-09

我有一个需要交互的元素网格。当其中一个 div 被点击时,它会变大。对于大多数元素来说,从右下角“生长”一个 div 是可以接受的:

$(.my-div).animate({ width: "379px", height: "204px" });

但是,在某些情况下,从右下角“增长”无法与应用程序的其余部分一起使用。

例如,我可能需要从右上角开始增长。有任何想法吗?我喜欢动画到新的宽度/高度的简单性,但我不确定它是否可以实现除了从右下角拖动之外的效果。

提前致谢 :)


有几种方法可以做到这一点,可以使用您提到的 jQuery 动画,也可以使用 CSS 过渡。它们看起来像

.child.clicked {
  height: 100px;
  width: 300px;
  transition: width 2s, height 2s;
-moz-transition: width 2s, height 2s;
-webkit-transition: width 2s, height 2s; 
-o-transition: width 2s, height 2s; 
}

or

  $('.child2').click(function() {
  $(this).animate({
    width: ['300px', 'swing'],
    height: ['100px', 'swing']
      }, { duration: "slow", easing: "easein" });
  });

这是一个可以玩的例子http://jsbin.com/uxicil/1/edit http://jsbin.com/uxicil/1/edit

有许多缓动属性和需要调整的东西,直到您完全按照您想要的方式进行操作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从右上角增长div? 的相关文章

  • jQuery 清除 DOM 先前加载的脚本

    大家好 我正在开发一个项目 我使用 jQuery 将页面加载到 div 中 每个页面都有自己的 jQuery 脚本 我的问题是以前加载的脚本没有从 DOM 中清除 这给我的项目带来了更大的问题 例如 我在一个页面中有一组计时器 它会自动保存
  • 将 DOCTYPE 添加到 Scala XML 的最简单方法?

    我怎样才能在 Scala XML 中制作这个最小的 HTML5 p p 当然 在 Scala 中制作类似 HTML 的 XML 很简单 gt val html p p html scala xml Elem p p 但是 我怎样才能注入DO
  • 从 DOM 中删除后,动态添加的 JavaScript 脚本会继续执行

    因此 我正在创建一个 SPA 并使用 AJAX 将 HTML 页面加载到我网站的索引页面中 问题是 当包含我的一个页面时 它似乎会徘 徊并执行其中的 JavaScript 代码 即使它随后从 DOM 中删除 索引 html 正文 div d
  • scrapy获取同一个类的第n个子文本

    我附上了一张照片 我面临的问题是获取同一类的第一个元素 我想得到 adxHeader gt adxExtraInfo 1st one gt adxExtraInfoPart 1st one gt a text 我编写了以下代码但不起作用 任
  • 100% 宽度减去边距和填充[重复]

    这个问题在这里已经有答案了 我一直在四处寻找 但找不到适用于我自己的问题的解决方案 我正在开发一个移动网站 需要输入框为屏幕的 100 宽度 但我有padding left 16px and margin 5px这使得盒子超出了屏幕 所以我
  • Excel Add In - console.log 在哪里输出它的消息 - NodeJS

    我正在尝试使用 JavaScript API 创建 Excel 插件 但我不明白 console log 在哪里输出它们的消息 所有 Microsoft 文档都包含 console log 示例 但没有解释 console log 输出消息
  • php在html页面中创建额外空间

    我是网络开发新手 我真的被这个愚蠢的问题困扰了 当我在 html 代码之前插入 php 代码时 如下所示 它在我的页面顶部创建了额外的空白空间 并将整个内容 推下 是否有可能以某种方式避免创建额外的空间 如果 php 代码位于 html 的
  • 如何使用表单上的提交按钮传递参数

    我想创建一个可以更改 PHP 制作的 mySQL 中的产品数据的程序 我有自动递增并指定每个产品的键列 当我单击编辑产品链接时 它将传递我从每个产品获得的键值 并链接到 editPage php Key data Key a href ed
  • 当我尝试转发电子邮件时,时事通讯无法隐藏 Gmail 上的响应内容

    我正在尝试写一份时事通讯 但当我测试时 我无法隐藏响应式内容GMail On Outlook and Yahoo一切正常 但如果我尝试转发电子邮件 隐藏的内容就会可见 我测试使用 putsmail https putsmail com gt
  • 将 Isotope 与通过 XML 和 jQuery 加载的对象一起使用。这可能吗?

    我正在使用 XML 和 jQuery 加载对象 并尝试连接到同位素 但似乎这是不行的 这可能吗 我尝试了许多不同的解决方案 但似乎找不到有效的解决方案 这就是我所拥有的 我已经尝试过同位素中的回调函数 但仍然没有运气 我用 XML 调用我的
  • 如何使用 PHP 从 MySQL 查询中按升序对值进行排序?

    我使用以下 PHP 脚本从 MySQL 表中获取和更改数据 并将结果打印在 HTML 表中 我希望按升序对数据进行排序 utilization percentage变量 它是由创建的 total client time total avai
  • 页面不会居中对齐

    我遇到了 CSS 问题 http www luukratief design nl dump parallax index html http www luukratief design nl dump parallax index htm
  • Google 地图 v3 中标准缩放控件的样式

    有没有一种简单的方法可以在 Google Maps JavaScript API v3 中设置缩放控件的样式 我想要的只是改变标准图像 http maps gstatic com intl en ALL mapfiles mapcontro
  • 有不同图像尺寸的缩略图 Bootstrap

    我想要包含不同大小和不同文本量的图像的缩略图 但我希望它们都具有相同的大小 像这样来自 Bootstrap 站点的示例 http getbootstrap com components thumbnails custom content 下
  • 获取 2 个日期之间的月份名称

    我有两个约会from and to 我想获取这两个日期之间的所有月份名称 以下是我的代码 var monthNames January February March April May June July August September
  • 使用 JavaScript 从 URL 变量读取来加载不同的 CSS 样式表

    我试图在我的 WordPress 博客上使用两个不同的样式表 以便在通过 Web 访问页面时使用一个样式表 而在通过我们的 iOS 应用程序访问博客内容时使用另一个样式表 现在 我们将 app true 附加到来自 iOS 应用程序的 UR
  • 如何仅在第一次访问时弹出模态窗口

    我有一个模式窗口 当您访问某个页面时会弹出 访客必须选择我同意或我不同意 我需要一个漂亮的小 jquery 脚本 它会记住谁之前访问过该页面并同意 这样他们每次访问该页面时就不会弹出模式 有人可以推荐一个好的脚本来使用吗 这是代码 div
  • Javascript / jQuery - 转换特殊 html 字符

    我有一个pre元素中包含一些 html 代码 该代码中有特殊字符 例如 lt 所以它不会破坏页面 然后我有一个 javascript 函数 它获取此 pre 元素的内容 突出显示它 使用 codemirror 并用突出显示的文本替换元素内容
  • html 表格顶部对齐?

    我怎样才能让图像和内容向右顶部对齐 如你所见 我尝试了 valign top table border 0 cellspacing 0 cellpadding 0 tbody tr valign top td valign top img
  • 按钮轮廓大于按钮尺寸

    我试图制作一个带有 3 个点的按钮 虽然它带来了奇怪的问题 当你点击它时 你会注意到在焦点模式下有一座奇怪的 山 button letter spacing 2px padding top 4em padding bottom 8em li

随机推荐