jQuery动画隐藏和显示 [英] Jquery animate hide and show

问题描述

当我单击链接时，我希望同时发生两件事.我正在慢慢浏览Jquery文档，但是还没有学习我需要的东西.

I would like to have two things happen at once when I click on a link. I am slowly going through Jquery documentation, but have yet to learn what I need yet.

这里是我网站

当我单击服务链接时，我想隐藏#slideshow div，并用一个新的div替换它.

When I click on the services link I would Like the #slideshow div to hide, and a new div to replace it.

我曾尝试通过单击服务"链接来使幻灯片动画化，但是它要么做动画功能，要么转到链接的html页面，而不是两者都做.我将如何完成这两个目标.

I had tried to just have the slideshow animate out on clicking the services link, but it would either do the animate function or go to the linked html page, not both. How would I accomplish both.

我只是在同一页面上隐藏并显示div还是进入新的html页面都没有关系.我只想拥有动画功能并在隐藏其中的同时更改内容.

It doesn't matter if I just hide and show divs on the same page, or if I go to a new html page. I just want to have the animate function and change the content while hiding one.

这是我正在使用的jQuery代码

this is the jquery code I am using

$(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是两个链接，当单击以隐藏#slideshow div并显示slideshow2 div时，我希望获得服务，该slideshow2 div将被隐藏，然后替换第一个.

home and services are the two links, and I would like services when clicked to hide the #slideshow div, and show the slideshow2 div, which would be hidden and then replace the first one.

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

there is a fair amount of html so it may be easier to view my source from the link.

推荐答案

已更新:此解决方案是根据评论中的后续问题进行更新的.

您应该使用show/hide方法的回调方法.

You should use the callback method of the show/hide methods.

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

The callback method is the second parameter of the .show/.hide functions. It is ran whenever the .show/.hide method is completed. Therefore, you can close/open your box, and within the callback method run an event immediately afterwards.

这篇关于jQuery动画隐藏和显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！