Jquery:需要帮助理解为什么它同时隐藏和显示列表元素,我在脚本中是否自相矛盾?
(没有动画:看起来不错) http://jsfiddle.net/nicktheandroid/4QaZD/
它是一个可过滤的列表。每个 LI 都包含一个隐藏的单词列表,当您在其中键入其中一个隐藏单词时,会显示其父项(LI)。它在没有附加 SlideUp/slideDown 或 FadeIn/FadeOut 动画的情况下工作正常,但是一旦我添加动画,它会很快地 SlideDown 然后 SlideUp,所以不知何故我在脚本中自相矛盾,或者没有正确分离功能?我花了很多时间试图弄清楚这一点,我的大脑已经绞尽脑汁。有人可以告诉我我做错了什么吗?我很确定这将是一些我看不到的明显的事情。我想做的就是让它向上/向下滑动,而不是即时隐藏/显示。
在第二个jsfiddle中,我用 .slideDown(400)
替换了 .removeClass("hidden")
并替换了 .addClass("hidden")
code> 和 .slideUp(400)
(动画:有问题)http://jsfiddle.net/nicktheandroid/4Lcx3/
直到输入 3 个字符后才会开始过滤。
(no animation: looks fine) http://jsfiddle.net/nicktheandroid/4QaZD/
its a filterable list. Each LI contains a hidden list of words, when you type one of those hidden words in, its parent (the LI) is shown. It works fine without a slideUp/slideDown or FadeIn/FadeOut animation attached to it, but once I add the animation, it will slideDown then slideUp really quickly, so somehow i'm contradicting myself in the script, or not seperating functionality correctly? i've spent so many hours trying to figure this out, my brain is racked. Can someone inform me what i'm doing wrong? I'm pretty sure it's gonna be something obvious that I just couldn't see. All i'm trying to do is have it slideUp/Down instead of instant hide/show.
In this second jsfiddle, i've replaced .removeClass("hidden")
with .slideDown(400)
and replaced .addClass("hidden")
with .slideUp(400)
(animated: problematic) http://jsfiddle.net/nicktheandroid/4Lcx3/
it doesn't start to filter until 3 characters are typed.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
每次击键都会向动画队列添加新效果,并且过滤的工作方式会不断变化,导致在之前的效果完成之前将更多效果添加到队列中。
在向队列添加更多项目之前,您应该使用
stop(true,true)
清除之前排队的项目。例如: http://jsfiddle.net/niklasvh/HWnaT/
您可能希望添加一些逻辑如果匹配的结果与上一次 keydown 之前的结果相同,请避免执行任何操作。
You are adding new effects to the animation queue with every keystroke, and the way your filtering works it constantly changes resulting in more effects added to the queue before previous ones have completed.
Before adding more items to the queue, you should clear the previous queued items with
stop(true,true)
.example: http://jsfiddle.net/niklasvh/HWnaT/
You may wish to add some logic to avoid doing anything, if the matched results are the same as they were before the previous keydown.