jquery - 在另一个 div 淡入之前淡出 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> 之内。 block ，并且在一个内 $(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();
   });
});