Javascript 淡出一个div，进入另一个div'；s位置

有3个

div

s和3个链接

一次只能显示一个

div

。当用户单击另一个

div

s的链接时，当前的一个应该淡出，所选的一个应该淡入，而不是先前的

div

以下是目前的代码：

Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        switches = $('#switches > li');
        slides = $('#slides > div');
        switches.each(function(idx) {
                $(this).data('slide', slides.eq(idx));
            }).click(
            function() {
                switches.removeClass('active');
                slides.removeClass('active').fadeOut('slow');
                $(this).addClass('active');
                $(this).data('slide').addClass('active').fadeIn('slow');
            });
    });
</script>

$（文档）.ready（函数（）{
开关=$（“#开关>li”）；
幻灯片=$（“#幻灯片>div”）；
开关。每个（功能（idx）{
$（this.data（'slide'，slides.eq（idx））；
}).点击(
函数（）{
switches.removeClass（'active'）；
slides.removeClass（'active'）。淡出（'slow'）；
$（this.addClass（'active'）；
$（this）.data（'slide'）.addClass（'active'）.fadeIn（'slow'）；
});
});

CSS

    <style style="text/css">
        ul {
            list-style: none;
        }
        li:hover {
            text-decoration: underline;
        }

        #switches .active {
          font-weight: bold;
        }

        #slides div {
          display: none;
        }

        #slides div.active {
          display: block;
        }

        .outer {
            position: absolute;
        }
        .outer div {
            width: 600px;
            height: 300px;
        }
        #uno {
            background-color: red;
        }
        #dos {
            background-color: blue;
        }
        #tres {
            background-color: green;
        }
    </style>

保险商实验室{
列表样式：无；
}
李：悬停{
文字装饰：下划线；
}
#开关。激活{
字体大小：粗体；
}
#幻灯片组{
显示：无；
}
#幻灯片分区活动{
显示：块；
}
.外部{
位置：绝对位置；
}
.外分区{
宽度：600px；
高度：300px；
}
#乌诺{
背景色：红色；
}
#dos{
背景颜色：蓝色；
}
#特雷斯{
背景颜色：绿色；
}

HTML

    <ul id="switches">
        <li class="active">First slide</li>
        <li>Second slide</li>
        <li>Third slide</li>
    </ul>

    <div class="outer" id="slides">
        <div class="active" id="uno">
            First div.
        </div>
        <div id="dos">
            Second div.
        </div>
        <div id="tres">
            Third div.
        </div>
    </div>

第一张幻灯片
第二张幻灯片
第三张幻灯片

第一组。
第二组。
第三组。

您可以在此处查看该页面：

我试图使用标准Jquery来实现这一点，但很明显，我的javascript代码有问题

---

你能找出哪里出了问题以及如何修复它吗？

你的CSS定义了一个

div

，该div不是活动的，而是隐藏的。因此，一旦删除

活动的

类，它将立即被隐藏

因此，请删除此条目：

    #slides div {
      display: none;
    }

并在页面加载中添加如下内容：

$(function() {
    $('#slides div:not([class="active"])').hide();
}); // will hide inactive slides initially but not always

---

问题是您使用的幻灯片是

slides.removeClass（'active'）.fadeOut（'slow'）。因此，首先它将删除active类，这意味着（根据您的CSS）它将是一个常规div，因此具有属性
display:none

因此，您的div将自动隐藏。只有在之后，您才能在一个隐藏的div上执行淡出（'slow'）

最好是这样做：

$('div.active').fadeOut(1000).delay(1000).removeClass('active');
$(this).delay(2000).fadeIn(1000).delay(1000).addClass('active');

如果我理解正确的话，这是可行的

问题是你不能在一个热隐藏或未隐藏的元素中淡入

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            switches = $('#switches > li');
            slides = $('#slides > div');
            switches.each(function(idx) {
                    $(this).data('slide', slides.eq(idx));
                }).click(
                function() {
                    switches.removeClass('active');
                    slides.removeClass('active').fadeOut('slow').hide();
                    $(this).addClass('active');
                    $(this).data('slide').addClass('active').fadeIn('slow');
                });
        });
    </script>


$（文档）.ready（函数（）{
开关=$（“#开关>li”）；
幻灯片=$（“#幻灯片>div”）；
开关。每个（功能（idx）{
$（this.data（'slide'，slides.eq（idx））；
}).点击(
函数（）{
switches.removeClass（'active'）；
slides.removeClass（'active'）.fadeOut（'slow'）.hide（）；
$（this.addClass（'active'）；
$（this）.data（'slide'）.addClass（'active'）.fadeIn（'slow'）；
});
});
谢谢你，成功了！我还将“position:absolute；”添加到“.outer div{}”，以使它们彼此对齐。听到这个消息很高兴@向下投票人：你能详细说明一下什么可以改进我的答案吗？谢谢你的回答，你肯定发现了一些我没有注意到的东西：）@3nigma这是问题的全部乐趣：P但如果你真的想知道，请阅读问题的第二段并查看此链接，注意到不一致吗？我有点匆忙，只是不想删除评论。。。无论如何