问题 Jquery动画隐藏和显示


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


3567
2018-06-21 23:59


起源



答案:


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

你应该使用 回调方法 显示/隐藏方法。

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


11
2018-06-22 00:05



好的,那很有用。谢谢!只是一个简单的问题,我将如何隐藏两个div,并在一次单击时用两个div替换它们。从技术上讲,我让它工作,但它用相同的东西替换两个div,所以它重复。我用当前的问题更新了我的网站。你能解释一下为什么,如果没有我在下面使用的先前代码,你的代码将无法工作。 - Cool Guy Yo
该解决方案已更新,以演示如何隐藏两个div,并用不同的div替换它们。 - Sampson
是的,现在我记得jquery文档中的教程中已经涵盖了所有这些内容,但在实际需要使用之前我从未掌握过这些内容。有没有办法让.hide像幻灯片一样动画而不是全部进入左上角 - Cool Guy Yo
只需将“隐藏”更改为“slideUp” - 如果您在文档中检查两种效果,您将看到它们具有相同的确切足迹:方法(速度,[回调]);意思是,你需要做的就是从隐藏更改为幻灯片,更改方法的名称:)就是这样。 - Sampson
你真棒!最后两个问题,非常感谢顺便说一下。有没有办法为replaceWith设置动画,我使用的是javascript字体替换, wiki.github.com/sorccu/cufon/about 有没有办法让它应用于我替换它的div,因为它们在运行后发生。 - Cool Guy Yo


答案:


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

你应该使用 回调方法 显示/隐藏方法。

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


11
2018-06-22 00:05



好的,那很有用。谢谢!只是一个简单的问题,我将如何隐藏两个div,并在一次单击时用两个div替换它们。从技术上讲,我让它工作,但它用相同的东西替换两个div,所以它重复。我用当前的问题更新了我的网站。你能解释一下为什么,如果没有我在下面使用的先前代码,你的代码将无法工作。 - Cool Guy Yo
该解决方案已更新,以演示如何隐藏两个div,并用不同的div替换它们。 - Sampson
是的,现在我记得jquery文档中的教程中已经涵盖了所有这些内容,但在实际需要使用之前我从未掌握过这些内容。有没有办法让.hide像幻灯片一样动画而不是全部进入左上角 - Cool Guy Yo
只需将“隐藏”更改为“slideUp” - 如果您在文档中检查两种效果,您将看到它们具有相同的确切足迹:方法(速度,[回调]);意思是,你需要做的就是从隐藏更改为幻灯片,更改方法的名称:)就是这样。 - Sampson
你真棒!最后两个问题,非常感谢顺便说一下。有没有办法为replaceWith设置动画,我使用的是javascript字体替换, wiki.github.com/sorccu/cufon/about 有没有办法让它应用于我替换它的div,因为它们在运行后发生。 - Cool Guy Yo