Jquery动画隐藏和显示

Question

当我点击链接时,我想一次发生两件事.我正在慢慢浏览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,因此从链接中查看我的来源可能更容易.

Answer 1

更新:此解决方案在评论中的后续问题后更新.

您应该使用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方法完成就会运行它.因此,您可以关闭/打开您的框,并在回调方法中立即运行事件.