一个接一个的jQuery fadeToggle
一个接一个的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
复制相关文章
点击加载更多
相似问题
Rails 4: Capistrano开发环境而不是生产环境？
在Rails生产环境中运行Thor
Grails 3:集成测试在开发环境中运行，而不是在测试环境中运行。
在Rails中运行远程开发环境
django覆盖管理在本地运行，而不是在生产环境中运行
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
