Jquery动画隐藏和显示
-
06-07-2019 - |
题
当我点击链接时,我想一次发生两件事。我正在慢慢浏览Jquery文档,但尚未了解我的需求。
以下是我网站的链接
当我点击服务链接时,我希望隐藏 #slideshow
div
,并使用新的div替换它。
我曾尝试在点击服务链接时让幻灯片显示动画,但它会执行动画功能或转到链接的html页面,而不是两者。我将如何完成两者。
如果我只是在同一页面上隐藏和显示div,或者如果我转到新的html页面,则无关紧要。我只想拥有animate功能并在隐藏内容时更改内容。
这是我正在使用的jquery代码
$(document).ready(function(){
$("a.home").toggle(
function(){
$("#slideshow").animate({ height: 'hide', opacity: 'hide' }, 'slow');
},
function(){
$("#slideshow").animate({ height: 'show', opacity: 'show' }, 'slow');
}
);
});
$(document).ready(function(){
$("a.services").toggle(
function(){
$("#slideshow2").animate({ height: 'show', opacity: 'show' }, 'slow');
},
function(){
$("#slideshow2").animate({ height: 'hide', opacity: 'hide' }, 'slow');
}
);
});
家庭和服务是两个链接,我想点击服务时隐藏 #slideshow
div
,并显示 slideshow2
div
,将被隐藏,然后替换第一个。
有相当数量的HTML,因此从链接中查看我的来源可能更容易。
解决方案
更新:此解决方案已根据评论中的后续问题进行了更新。
您应该使用show / hide方法的回调方法。
$("a").click(function(){
/* Hide First Div */
$("#div1").hide("slow", function(){
/* Replace First Div */
$(this).replaceWith("<div>New Div!</div>");
});
/* Hide Second Div */
$("#div2").hide("slow", function(){
/* Replace Second Div */
$(this).replaceWith("<div>New Div!</div>");
});
/* If you wanted to sequence these events, and only
hide/replace the second once the first has finished,
you would take the second hide/replace code-block
and run it within the callback method of the first
hide/replace codeblock. */
});
回调方法是.show / .hide函数的第二个参数。只要.show / .hide方法完成就会运行它。因此,您可以关闭/打开您的框,并在回调方法中立即运行事件。
不隶属于 StackOverflow