11

当我点击一个链接时，我希望同时发生两件事。我正在慢慢浏览 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 divhome 和 services 是两个链接，当点击隐藏和显示时，我想要服务slideshow2 div，这将被隐藏然后替换第一个。

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

4

1 回答 1

11

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

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

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

于 2009-06-22T00:05:30.533 回答