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是两个链接，我希望services点击时隐藏#slideshow div，并显示slideshow2div，它会被隐藏然后替换第一个.

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.

推荐答案

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

您应该使用显示/隐藏方法的回调方法.

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屋！