我有一个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的片刻。
发布于 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动画:
https://stackoverflow.com/questions/16290468
复制相似问题