Javascript 多个div上的jquery fadetoggle

现在我阅读了所有fadeToggle文章，但无法使其正常工作：

我通过切换（使用css.hidden{display:none；}）通过下拉选择不同的div（para1、para2等），效果非常好。但我想让这双沙发滑进去。一旦我将.toggle更改为.fadeToggle（或fadeIn），输出就完全混淆了

有人知道我做错了什么吗

html是：

<div id="dropdown">
<select id="tables" name="tables[]" onchange="changeHandler()">
<option value="defcont" selected>Select some content</option>
<option value="cont1">Content 1</option>
<option value="cont2">Content 2</option>
<option value="cont3">Content 3</option>
</select>
</div><!-- DROPDOWN -->


<div id="paragraphs">
<div id="paradefault">This is the default content without selection</div>
<div id="para1" class="hidden">You see now content 1.</div>
<div id="para2" class="hidden">You see now content 2.</div>
<div id="para3" class="hidden">You see now content 3?.</div>
</div><!-- paragraphs -->

选择一些内容
内容1
内容2
内容3
这是没有选择的默认内容
您现在可以看到内容1。
您现在可以看到内容2。
你现在看到内容3了吗？。

剧本是：

<script type="text/javascript">
$('#tables').change(function(e){
$('#paradefault').toggle($('option[value="defcont"]:selected',this).length > 0);
$('#para1').toggle($('option[value="cont1"]:selected',this).length > 0);
$('#para2').toggle($('option[value="cont2"]:selected',this).length > 0);
$('#para3').toggle($('option[value="cont3"]:selected',this).length > 0);
});
</script>

$（“#表”）。更改（函数（e）{
$（'#paradefault'）.toggle（$（'option[value=“defcont”]：selected'，this）.length>0）；
$（'para1'）。切换（$（'option[value=“cont1”]：selected'，this）.length>0）；
$（'para2'）.toggle（$（'option[value=“cont2”]：selected'，this）.length>0）；
$（'para3'）。切换（$（'option[value=“cont3”]：selected'，this）.length>0）；
});

最近的一篇文章是：-但只是使用切换，而不是dafeToggle

---

非常感谢您的帮助

嗯……这就是你要找的吗？ 我必须纠正这种“神经质”，但也许它在正确的轨道上

html:

css:

---

您想同时切换所有颜色的淡入淡出，还是一个接一个？一个接一个。当我往下看cont2时，第2段应该会消失。它起作用了，巴德不会褪色。当我将-toggle改为.fadeToggle时，它会以一种奇怪的混合方式显示所有其他段落：）jsfidle在这里：很高兴你喜欢它，克里斯。如果你想让我帮你解决这个问题，让我知道，我很乐意。如果它解决了您的问题，请单击答案旁边的复选框，我将不胜感激。：-）@itsmikem这种神经质的解决办法是什么？@Drai我得回去看看我的代码。在我开始之前可能有点。。。

<div id="dropdown">
    <select id="tables" name="tables[]" onchange="changeHandler()">
        <option value="defcont" selected>Select some content</option>
        <option value="cont1">Content 1</option>
        <option value="cont2">Content 2</option>
        <option value="cont3">Content 3</option>
    </select>
</div>
<p></p>
<div id="paragraphs">
    <div id="paraDefault">This is the default content without selection</div>
    <div id="para_1" class="hidden">You see now content 1.</div>
    <div id="para_2" class="hidden">You see now content 2.</div>
    <div id="para_3" class="hidden">You see now content 3.</div>
</div>

var opts = $("#tables option");
$('#tables').on("change", fader);

function fader(e) {
    switch (e.target.value) {
        case ("defcont"):
            var others = String("#paragraphs div[id^='para_']");
            $(others).each(function () {
                $(this).fadeTo(250, 0);
            });
            $(others).promise().done(function () {
                $(others).css("display", "none");
                $("#paraDefault").fadeTo(1000, 1);
            });
            break;
        default:
            var showPara = String("para_" + e.target.value.substr(e.target.value.length - 1));
           // alert(showPara);
            var sel = String("#paragraphs div[id!=" + showPara + "]");
            $(sel).each(function () {
                $(this).fadeTo(250, 0);
            });
            $(sel).promise().done(function () {
                $(sel).css("display", "none");
                $(String("#" + showPara)).fadeTo(1000, 1);
            });
    }
}

div[id^='para_'] {
    display:none;
}
#dropdown {
    margin-bottom:100px;
}