Jquery动画隐藏和显示

我想单击链接时立即发生两件事情。我正在慢慢浏览Jquery文档，但尚未学习我需要的东西。Jquery动画隐藏和显示

这里是我的site

当我点击了链接服务，我想#slideshow DIV隐藏起来，一个新的div来取代它的链接。

我曾尝试只点击服务链接上的幻灯片动画，但它会执行动画功能或转到链接的HTML页面，而不是两者。我将如何完成这两个。

如果我只是在同一页面上隐藏和显示div，或者如果我转到新的html页面，这并不重要。我只想拥有动画功能并在隐藏内容的同时更改内容。

这是我使用

$(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'); 
    } 
); 
});

产品和服务两个环节的jQuery代码，并点击隐藏#slideshow股利时，我想服务，并显示slideshow2 DIV，这将是隐藏然后替换第一个。

有相当多的html，所以它可能更容易从链接查看我的来源。

来源

2009-06-21 Cool Guy Yo

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

您应该使用显示/隐藏方法的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方法完成，它就会运行。因此，您可以关闭/打开您的方框，然后在回调方法中立即运行一个事件。

来源

2009-06-22 00:05:30 Sampson

很好，工作。谢谢！只是一个简单的问题，我将如何去隐藏两个div，并用一个单一的点击替换为两个div。从技术上讲，我得到它的工作，但它取代了两个divs相同的事情，所以它重复。我用当前的问题更新了我的网站。你能向我解释为什么，你的代码不会在没有我之前使用的代码的情况下工作。 – 2009-06-22 16:02:46

Jquery动画隐藏和显示

回答

相关问题