Question

现在我阅读了所有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' multiple div tags via drop down menu - 但只是切换而不是dafeToggle。

非常感谢任何帮助！

Answer 1

嗯......这就是你要找的东西吗？ 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;
}

多个div上的jquery fadetoggle

1 个答案: