jQuery Accordion : IE animation issues-6ren

jQuery Accordion : IE animation issues

转载作者：行者123 更新时间：2023-12-03 21:53:47

24

4

更新

出于三个原因，我将其设为社区 wiki:

我觉得我没有得到明确的答案，但是
我早已不再需要答案，因为我推出了自己的 Accordion 功能
这个问题得到了大量浏览，所以显然很多人仍然感兴趣

因此，如果有人想更改/澄清这个问题并使其成为明确的指南，请成为我的客人。

<小时/>

我正在使用 jQuery 的 accordion UI element 处理页面。我根据该示例对 HTML 进行了建模，但 <li> 内的 HTML 除外。元素，我有一些无序列表的链接。像这样:

  $(document).ready(function() {
     $(".ui-accordion-container").accordion(
        {active: "a.default", alwaysOpen: true, autoHeight: false}
     );
  });

  <ul class="ui-accordion-container">
  <li> <!-- Start accordion section -->
   <a href='#' class="accordion-label">A Group of Links</a>
   <ul class="linklist">
      <li><a href="http://example.com">Example Link</a></li>
      <li><a href="http://example.com">Example Link</a></li>
   </ul>

   <!--and of course there's another group -->

问题:IE 动画很臭

虽然 IE7 可以很好地对文档的示例 Accordion 菜单进行动画处理，但它对我的有问题。具体来说，页面上的一个 Accordion 菜单移动不稳，并且内容闪烁。 我知道这不是 CSS 问题，因为如果我不包含 CSS 文件，也会发生同样的情况。

页面上的另一个 Accordion 菜单会打开您单击的第一个部分，之后就不会打开其中的任何部分。

这两个问题都是 IE 特有的，如果我使用选项 animated: false ，两个问题都会消失。。但我想保留默认值 slide动画，因为它可以帮助用户了解菜单正在做什么。

还有别的办法吗？

最佳答案

我感受到你的痛苦!我最近经历了一次荒谬的故障排除，我将母版页和页面布局中的所有内容逐 block 删除(这实际上是在 SharePoint 中)，不断缩小页面。

最终结果是 html 文档没有文档类型(某些开发人员已将其删除)。缺乏文档类型意味着 IE 7 运行在怪异模式下，并且 JQuery Accordion 发出的内联 CSS 表现得很奇怪。

考虑添加:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

位于母版页或 html 文档的顶部(如果尚未定义文档类型)。

实际上有一个专门讨论怪癖模式行为的网站。您可以查看关于Quirks Mode here的文章。我wrote a post其中包含有关故障排除的更多相关信息。

关于jQuery Accordion : IE animation issues，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/332448/

24

4

0

文章推荐： javascript - 如何将 jQuery 对象转换为 d3 对象？

文章推荐： javascript - jstree jquery如何迭代所有节点

文章推荐： jquery - 确定 html select 的任何子选项中是否包含值

regex - 使用 linux 终端在 .txt 中查找 animal-060、animal-061、animal-062 ...、animal-069
我想使用 linux 终端在 .txt 文档中找到字符串 animal-0**。 ** 是从 60 到 69 的数字。我想我必须在命令中使用 grep 和正则表达式:grep -E 'animal-0
c# - 为什么 Animals[] animals = new Cat[5] 编译，但 List animals = new List() 不编译？
在他的C# 深入一书中，Jon Skeet 试图回答以下问题: Why can't I convert List to List? 为了解释它，他从一个代码片段开始，其中包括以下两行: Animal[
java - public void addAll(List animals) 和 public void addAll(List animals) 有什么区别？
我对此有点困惑，所以希望能提供一些说明。 public void addAll(List animals) 对比 public void addAll(List animals) 最佳答案区别在于
animation - 使用Core Animation，是否可以为多个CALayer组合动画？
我遇到的情况是，我有许多CALayer以“基于回合”的方式进行动画处理。我为每个CALayer上的位置设置了动画，但是它们具有完全相同的持续时间。一旦所有这些CALayer动画完成，就会启动一个新的“
animation - Unity Animator 默认图层状态在第一帧卡住
我为正在拔出的刀和空闲状态设置了动画，但是无论我做什么，它们都不会在游戏中设置动画。相反，它卡住在第一帧上。这是动画窗口运行时的样子: 动画: 在检查器中: 最佳答案我遇到了类似的问题，它归结于动画
animation - jQueryMobile : page animations
我的单个 HTML 文件中嵌入了 2 个页面。所以它所做的是最初它显示 PAGE1，然后如果我从右向左或从左向右滑动 PAGE2 应该显示。我的问题是如何根据我的滑动更改页面动画？比如当我从右向左滑动
react-native - 使用 Animated.Flatlist 和 Animated.ScrollView 为 Animated.View 设置动画不流畅
我想做一个动画标题。我创建了一个 FlatList 的动画组件，用过 onScroll函数来更新动画值。使用绝对位置放置一个 View (Animated.View) 作为动画 FlatList
iphone - 打开窗帘: Animation with Core Animation
我想制作一个打开的窗帘的动画。我有两张图像:一张用于窗帘的左侧，一张用于窗帘的右侧(以红色表示)。我想用核心动画顺利地将它们滑走。我应该寻找什么类型的动画？如何实现逼真的滑动风格？问候，斯特凡 a
animation - 在 Unity Animator 中缓慢旋转
我有一个简单的旋转动画，可以让一个对象绕其轴旋转。目前它旋转得太快了，我想减慢速度，我试过增加样本？？但我对动画了解不多，所以我可能过得很好。如何放慢动画速度？它只有两个键。最佳答案首先，通过双击
animation - Angularjs ng-animate 移动示例？
我似乎无法在上类时获得 angularjs ng-animate，而且在野外似乎也没有任何示例。以演示 fiddle 为例: http://jsfiddle.net/yfajy/ 向 CSS 添加如下
jquery-animate - jQuery animate() 显示动画进度的百分比
使用以下代码段:http://jsfiddle.net/sylouuu/V7a3Y/2/ 我想在动画的#log 中显示从 0% 到 100% 的进度百分比，100% 很容易通过回调... 有可能这样做
animation - 使用 SVG animate 为折线的外观设置动画
我正在 HTML 中使用 SVG 来使用折线工具定义特定的形状。我希望通过按一下按钮并在几秒钟内将特定形状的外观动画化为不同的形状。我一直在考虑使用动画工具来更改折线点属性，但到目前为止一直无法找到
jQuery animate().delay().animate() 我这样做对吗？
您好，在 Firefox(相当糟糕)和 Chrome 之间获得可变性能和效果(还可以)有时这不会执行第一个动画，有时会卡住。我的结构正确吗？ $notification.animate({
iphone - 设置编辑 :animated: is missing animation?
我在 iOS 编程时遇到了一个问题:当我尝试为我的 tableView 制作自定义编辑按钮时，我无法将其设置为动画。下面是我如何初始化 tableview: - (void)viewWillAppea
animation - swift : animator() causes EXC_BAD_ACCESS
自 beta 5 以来，我注意到在 OS X 10.10 下隐式动画有一些奇怪的行为。调用动画代理有时会导致应用程序崩溃。我设置了一个非常简单的自定义 View 。这是完整的代码: import Co
animation - Angular2 Animations::Easings 没有按预期工作
我正在开发一个可折叠组件，您可以单击它来向上/向下滚动以显示/隐藏详细信息。组件如下: // component.ts import {Component, Directive, Input} fro
web-animations - 使用Web Animations API扩展div高度0 --> 'auto'
我正在努力了解 web animations standard和他们的 polyfill ，正如我所见，它在 Angular 动画库中运行良好(您将动画结束值设置为“*”，这将变为 div 大小的 1
animation - Xamarin 安卓 : Animated Splash Screen
我想创建一个动画闪屏，但出现此错误: Android.Content.Res.Resources+NotFoundException: File res/drawable/splash_screen.
core-animation - 使用 Core Animation 减慢和加速动画
我正在尝试对我的应用程序应用慢动作效果，就像按 Shift 时如何减慢 Mac OS 的大多数图形效果一样。我的应用程序使用 CoreAnimation，所以我认为它应该没什么大不了的:set sp
animation - Android :Translation and Rotation Animation simultaneously
我想以编程方式同时不在XML文件中显示两个动画，它应该 ROTATE和TRANSLATE 我怎样才能做到这一点？请以某种方式建议我?????? 这是ma代码:> ImageView snowImg1

首页

博学

6Ren·AI

商城

jQuery Accordion : IE animation issues

更新

问题:IE 动画很臭