通过使用 Jquery 添加类来触发 CSS3 转换

2024-05-26

目前我有一个正在运行的小提琴,当我向它添加一个类时,我试图让 css3 不透明过渡触发。基本设置是我单击一个按钮,然后通过 jquery 添加一个 div 到 dom,然后将该元素添加到 dom,然后向其中添加一个类。向该新 dom 元素添加类应该会启动我的转换,但事实并非如此,唯一发生的事情是该元素正在显示,但不透明度转换不起作用。任何帮助将不胜感激,我留下了小提琴的链接 这里小提琴链接 http://jsfiddle.net/LmjfN/是的,我知道我可以只用 jquery 进行淡入,但这只是一个实验,它可能会用于启动除不透明度之外的其他 css 转换


我以前遇到过这个问题,我找到的唯一解决方法是添加一个 setTimeout 让 DOM 注意到有一个新元素。它可以是零毫秒,但它仍然有效:

$('button').live('click', function() {
    $(this).after("<div class='fade'>This is just a test</div>")
    setTimeout(function(){$(".fade").addClass("in");}, 0)
});

http://jsfiddle.net/tfmFx/ http://jsfiddle.net/tfmFx/

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

通过使用 Jquery 添加类来触发 CSS3 转换 的相关文章

  • 如何为 HTML 元素创建鼠标拖动滑块?

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H
  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi
  • 更改 yii 中注册脚本文件的顺序

    我正在为 Yii 应用程序制作一个小部件 主布局视图注册了所有常见的脚本文件 例如 jQuery 和 jQueryUI 在我的小部件中 我想使用依赖于已加载的 jQueryUI 的 jQueryUI 插件 我知道我可以指定脚本包含在页面上的
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • jQuery Dialog 和 Datepicker 插件出现问题

    我有一个对话框 对话框上有一个日期选择器字段 当我打开对话框并单击日期选择器字段时 日期选择器面板显示在对话框后面 我尝试了更多属性 z索引 堆栈 大框架 但没有成功 有人可以帮助我吗 Tks 旧答案 z index 注意连字符 是重要的属
  • ajaxChosen 插件将无法工作

    我整个下午都在摆弄 ajaxChosen 因为我喜欢 Chosen 但我的选项值集变得太大了 我也尝试过 select2 但它太慢了 http harvesthq github io chosen http harvesthq github
  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • 使用 jQuery 从 CKEditor 的 iframe 中获取内容

    我有一个自定义编写的 CMS 它使用CKEditor http ckeditor com FCKEditor v3 用于编辑内容 我也在使用jQuery 验证 http bassistance de jquery plugins jquer
  • 响应式图像 - srcset 和尺寸属性 - 如何正确使用两者:基于设备像素比和基于视口的选择一起?

    到目前为止 我经常读到这个问题 并且它也发生在我自己的项目中 这里介绍一下我到目前为止所发现的关于 srcset 和 size 属性的内容 关于如何使用有两种不同的可能性srcset 属性 来源 w3c http w3c github io
  • 有角度的动态背景图片

    在 html 模板中 我有这种带有动态图像的样式 div style background none width 200px height 150px div 它适用于网络浏览器和 Android 浏览器 但是 使用 style 的动态背景
  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • jQuery AJAX 请求在 IE8 中失败,并显示消息“错误:调用 open 方法之前无法调用此方法。”

    我正在使用 jQuery 1 4 2 并尝试执行一个简单的 AJAX 请求 目标 URL 返回一个 JSON 字符串 我使用 jslint 对其进行了验证 该请求在 Firefox 和 Chrome 中有效 但不想在 IE8 中工作 我无法
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项

随机推荐