在另一个淡入之前淡出div - Jquery

Question

我对这个jquery业务非常陌生 - 如果你能在心中找到原谅我和我无知的问题，我将非常感激。

我的困境：我有两个div，我需要一个淡出之前另一个淡出。

这是我的代码：

<script type="text/javascript">
  $(document).ready(
    function(){
        $("#about").click(function () {
            $("#aboutinfo").fadeToggle();
        });
    });
</script>
    <script type="text/javascript">
  $(document).ready(
    function(){
        $("#contact").click(function () {
            $("#contactinfo").fadeToggle();
        });
    });
</script>

相关网站为this。

另外，我认为我写错了jquery，因为这两个语句都有自己的<script></script>标签？

感谢任何可以提供帮助的人：）

编辑：这似乎不起作用：

<script type="text/javascript">
  $(document).ready(
    function(){
        $("#music").click(function () {
            $("#musicinfo").fadeToggle();
            $("#about").click(function () {
            $("#aboutinfo").fadeToggle();
            $("#contact").click(function () {
            $("#contactinfo").fadeToggle();
        });
    });
</script>

Answer 1

动画都接受将在一个动画结束时调用的回调函数：

$('#about').click(function() {
    $('#contactinfo, #musicinfo').fadeOut(function() {
        $('#aboutinfo').fadeIn();
    });
});

如果没有任何褪色（即没有可见元素），回调将立即触发。

...是的，这可能都在一个<script>块内，并且在一个$(document).ready听众中：

$(document).ready(function() {
   $('#about').click(function() { ... });
   $('#contact').click(function() { ... });
});

如果您使用了类和ID，您可能可以为所有元素编写单击处理程序。类似的东西：

$('.header-item').click(function() {
   var target = $('#' + this.id + 'info');
   $('.info-item').not(target).fadeOut(function() {
      target.fadeIn();
   });
});

Answer 2

$("#button").click(function()
{
$("#div1").hide();
$("#div2").fadeIn("slow");
});

它会很快消失，并会在另一个div中淡出。