jQuery动画隐藏和显示

Question

我希望在点击链接时同时实现两件事情。 我正在逐步查阅jQuery文档，但尚未学到我需要的内容。

这是我的网站的链接

当我点击"services"链接时，我希望#slideshow div 隐藏，并替换成新的 div

我曾试图在点击"services"链接时只让幻灯片动画消失，但它要么执行动画函数，要么跳转到链接的html页面，无法同时实现。我该如何同时完成这两个功能。

我不介意只在同一页上隐藏和显示

，或者去到一个新的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');
    }
  );
});

主页和服务是两个链接，当我点击服务时，我希望隐藏#slideshowdiv，显示slideshow2div，这将取代第一个。

有相当多的HTML，因此从链接查看我的源代码可能更容易。

- Cool Guy Yo

Answer 1

更新：根据评论中的后续问题，此解决方案已更新。

在显示/隐藏方法中，您应该使用回调方法callback method。

$("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方法完成时运行。因此，您可以关闭/打开您的框，在回调方法中立即运行一个事件。

- Sampson

---

只需将 "hide" 更改为 "slideUp" - 如果您在文档中检查这两种效果，您会发现它们具有完全相同的印记：method(speed，[callback])；意思是说，您只需更改方法的名称即可从隐藏更改为slideUp :) 就是这样。 - Sampson

你真棒！最后还有两个问题，顺便感谢一下。有没有办法对replaceWith进行动画处理？我正在使用javascript字体替换http://wiki.github.com/sorccu/cufon/about，是否有办法将其应用于替换的div，因为它们是在其运行之后发生的。 - Cool Guy Yo

我不确定你所说的“animate the replaceWith”是什么意思。该方法会删除一个HTML元素，并插入另一个元素。唯一能产生“动画”效果的方式是将第一个元素淡出，然后淡入第二个元素。但这并不真正实现了过渡动画 - 它只是分别对两个元素进行了动画处理。 - Sampson

关于您的第二个问题，我从未使用过“Cufon”，但如果它有手动调用的方法，您可以在添加新div后调用该方法。根据我对文档的理解，您可以调用Curfon.replace（“element”）- 这很可能是您在新div可见后选择的选项。只需更改H1以反映您的新内容即可。 - Sampson

@JonathanSampson 是否可以用.promise().done()替换回调函数？ - Steven