jQuery可点击元素的效果序列(Sequence of effects for jQuery clickable element)

我设计了一个h2标签，并使用jQuery将其转换为各种按钮。单击时，隐藏的内容将从此按钮下方向下滑动。我的问题是效果的顺序，我不能让他们正确的时间。

以下是我希望它的样子：

按钮有圆角。单击时，底部的圆角将被删除，因此看起来隐藏的内容从按钮底部滑出。

再次单击该按钮时，内容会向上滑动到按钮中。当内容完成向上滑动时，按钮将恢复其所有圆角的外观。

在我的jfiddle样机上有2个示例按钮。示例1适用于第一次单击，但在再次单击内容时，按钮变为圆形，然后内容再次滑回。

单击Example2时，按钮会在内容滑出时保持圆形。但是再次单击以隐藏内容时，序列将按正确的顺序运行。

这是要点：

$('.section').hide(); $('.example1').click( function(event) { event.preventDefault(); $(this).next().slideToggle('slow') .prev().toggleClass('open-header'); }); $('.example2').click( function(event) { event.preventDefault(); $(this).next() .slideToggle('slow') .queue( function(next) { $(this).prev().toggleClass('open-header'); $(this).dequeue(); }); });

我想结合每个按钮的工作部分，但我不知道如何。我阅读了关于使用.queue（）或回调的其他帖子，但我不知道我在做什么因为我无法让它工作。有什么建议？

I styled an h2 tag, and using jQuery turned it into a button of sorts. When clicked, hidden content will slide down from underneath this button. My problem is the sequence of effects, I can't get them timed right.

Here is how I'd like it to look:

The button has rounded corners. When clicked, the rounded corners on the on the bottom are removed so it looks like the hidden content is sliding out of the bottom of the button.

When the button is clicked again, the content slides up into the button. When the content has finished sliding up, the button resumes its appearance of all rounded corners.

On my jfiddle mockup there are 2 example buttons. Example 1 works with the first click, but the button becomes round before the content has slid back up when clicked again.

When clicking Example2 the button stays round as the content slides out. But when clicked again to hide the content, the sequence works in the correct order.

Here's the gist:

$('.section').hide(); $('.example1').click( function(event) { event.preventDefault(); $(this).next().slideToggle('slow') .prev().toggleClass('open-header'); }); $('.example2').click( function(event) { event.preventDefault(); $(this).next() .slideToggle('slow') .queue( function(next) { $(this).prev().toggleClass('open-header'); $(this).dequeue(); }); });

I want to combine the working parts of each button but I'm not sure how. I read other posts about using .queue() or callbacks, but I must not know what I'm doing cuz I can't get it to work. Any suggestions?

最满意答案

而不是使用切换，只需手动检查它是否具有.open-header类，并在向上滑动时，删除回调上的类：

$('.example1').click( function(event) { event.preventDefault(); if(!$(this).hasClass('open-header')) { $(this).addClass('open-header'); $(this).next().slideDown('slow'); } else { $(this).next().slideUp('slow',function() { $(this).siblings('h2').removeClass('open-header'); }); } });

更新小提琴： http ： //jsfiddle.net/WsE8R/5/

instead of using toggle, just check if it has the .open-header class manually, and when sliding up, remove the class on the callback:

$('.example1').click( function(event) { event.preventDefault(); if(!$(this).hasClass('open-header')) { $(this).addClass('open-header'); $(this).next().slideDown('slow'); } else { $(this).next().slideUp('slow',function() { $(this).siblings('h2').removeClass('open-header'); }); } });

updated fiddle: http://jsfiddle.net/WsE8R/5/

更多推荐