一个接一个的jQuery fadeToggle
提问于 2013-04-30 00:41:00
我有一个jquery函数，可以用fadeToggle切换两个div。
$(".container .readmore").click(function() {
$(".container .content-teaser").fadeToggle('slow');
$(".container .content-full").fadeToggle('slow');
});但我需要它来淡出可见的，然后淡出隐藏的。反之亦然。
有什么想法吗？
谢谢C
更新:请在此处检查jsfiddle：http://jsfiddle.net/tSmUA/4/
现在我有一个问题，当切换回来时，它显示了两个div的片刻。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-30 00:43:06
简单的解决方法。在Fade函数的末尾，使用fadeToggle的第二个参数来提供动画完成后的回调。
http://api.jquery.com/fadeToggle/
下面将进行淡入淡出，然后一旦淡入淡出完成，匿名函数就会被调用。要反向淡入淡出，只需适当修改选择器即可。
$(".container .readmore").click(function() {
$(".container .content-teaser").fadeToggle('slow', function ()
{
$(".container .content-full").fadeToggle('slow');
});
});更新：提问者在反转淡出效果时遇到了问题。更新代码以显示如何进行反向淡入淡出。
$(".container .readmore").click(function() {
var container = $(".container"); //Narrow the selector to the container
var teaser = $(".content-teaser", container);
var fullContent = $(".content-full", container);
//Check to see if the teaser is visible
if(teaser.is(':visible'))
{
teaser.fadeToggle('slow', function ()
{
fullContent.fadeToggle('slow');
});
}
else
{
fullContent.fadeToggle('slow', function ()
{
teaser.fadeToggle('slow');
});
}
});样本可在以下网址查看：http://jsfiddle.net/v25zx/
更新2:为淡入淡出的代码添加了另一个修订版。这简化了jquery动画：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16290468
复制相关文章
error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http:/
error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http:/
点击加载更多
腾讯云开发者
