当我点击链接时,我想一次发生两件事。我正在慢慢浏览Jquery文档,但尚未了解我的需求。
这是我的链接 现场
当我点击服务链接时,我希望隐藏#slideshow div,并使用新的div替换它。
我试图让幻灯片显示单击服务链接动画,但它可以执行动画功能或转到链接的html页面,而不是两者。我将如何实现这两个目标。
如果我只是在同一页面上隐藏和显示div,或者如果我转到一个新的html页面,则无关紧要。我只想拥有动画功能并在隐藏内容时更改内容。
这是我正在使用的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,因此从链接中查看我的来源可能更容易。
更新:此解决方案在评论中的后续问题后更新。
你应该使用 回调方法 显示/隐藏方法。
$("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方法完成,就会运行它。因此,您可以关闭/打开您的框,并在回调方法中立即运行事件。
更新:此解决方案在评论中的后续问题后更新。
你应该使用 回调方法 显示/隐藏方法。
$("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方法完成,就会运行它。因此,您可以关闭/打开您的框,并在回调方法中立即运行事件。