Jquery 动画隐藏和显示

Posted 2023-05-08

【中文标题】Jquery 动画隐藏和显示

【英文标题】：Jquery animate hide and show

【发布时间】：2010-11-04 17:38:05

【问题描述】：

当我点击一个链接时，我希望同时发生两件事。我正在慢慢浏览 Jquery 文档，但还没有了解我需要什么。

这是我的site的链接

当我点击服务链接时，我希望 #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');
    
  );
);

home和services是两个链接，我希望services点击后隐藏#slideshowdiv，并显示slideshow2div，这将被隐藏然后替换第一个。

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

【参考方案1】：

已更新：此解决方案已根据 cmets 中的后续问题进行了更新。

您应该使用 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 方法完成，它就会运行。因此，您可以关闭/打开您的盒子，然后在回调方法中立即运行一个事件。

【讨论】：

太好了，成功了。谢谢！只是一个简单的问题，我将如何隐藏两个 div，然后单击一下将它们替换为两个 div。从技术上讲，我让它工作，但它用相同的东西替换了两个 div，所以它重复了。我用当前的问题更新了我的网站。你能解释一下为什么，如果没有我在它下面使用的以前的代码，你的代码将无法工作。

解决方案已更新以演示如何隐藏两个 div，并用不同的 div 替换它们。

是的，现在我记得所有这些都在 jquery 文档中的教程中介绍过，但直到真正需要使用它时我才掌握这些东西。有没有办法像滑动一样为 .hide 设置动画，而不是全部进入左上角

只需将“hide”更改为“slideUp” - 如果您在文档中检查这两种效果，您会发现它们具有完全相同的足迹：method(speed, [callback]);意思是，要从隐藏更改为上滑，您所要做的就是更改方法的名称:) 就是这样。

你太棒了！最后两个问题，非常感谢。有没有办法为 replaceWith 设置动画，我正在使用 javascript 字体替换，wiki.github.com/sorccu/cufon/about 有没有办法让它应用于我替换它的 div，因为它们发生在它运行之后。