Question

当我点击链接时，我想一次发生两件事。我正在慢慢浏览Jquery文档，但尚未了解我的需求。

以下是我site

的链接

当我点击服务链接时，我希望#slideshow div隐藏，并使用新的div替换它。

我曾尝试在点击服务链接时让幻灯片显示动画，但它会执行动画功能或转到链接的html页面，而不是两者。我将如何完成两者。

如果我只是在同一页面上隐藏和显示div，或者如果我转到新的html页面，则无关紧要。我只想拥有animate功能并在隐藏内容时更改内容。

这是我正在使用的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，因此从链接中查看我的来源可能更容易。

Answer 1

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

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

Jquery动画隐藏和显示

1 个答案: