0

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

我通过下拉切换（使用 css .hidden {display: none;}）选择不同的 div（para1、para 2 等），并且效果很好。但是我想使 div 平滑地淡入。一旦我将 .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 -->

脚本是：

<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>

最接近的文章是：'fadeToggle' 多个 div 标签通过下拉菜单- 但只有切换而不是 dafeToggle。

非常感谢任何帮助！

4

1 回答 1

0

嗯……这就是你要找的吗？ http://jsfiddle.net/itsmikem/uvT76/ 我将不得不修复“跳跃”，但也许它在正确的轨道上。

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>
<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>

js：

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);
            });
    }
}

CSS：

div[id^='para_'] {
    display:none;
}
#dropdown {
    margin-bottom:100px;
}
于 2013-11-10T18:25:17.650 回答