在另一个淡入之前淡出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>

有问题的网站是这个。

另外，我认为我写错了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");
});

它会很快淡出，并在另一个分区中淡出。