Question

所以基本上我左边有一个导航栏。当用户单击某个选项时，它应淡入与其关联的内容。当用户单击另一个选项时，它应该淡出当前内容并淡入下一个。我知道如何处理这个逻辑，但由于某种原因，fadein无效。这是我的HTML

<div id="Hotel" class="Information"  style="display:none;">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>

这是我的jquery：

$(document).ready(function(e) {
    $("ul.navigation > li").click(function(e) {
        $sel = $(this).val();
        if($sel == 0)
            $("#schedule").show();
        else if($sel == 1) {
            $('#Hotel').show();
            $('#Hotel').fadeIn('slow');
        }
    });
});

当我点击导航栏上的酒店链接时，内容只显示没有任何淡入淡出。我的代码有什么问题？

Answer 1

不要调用show（）。 http://api.jquery.com/fadeIn/

Answer 2

试试这个

$(document).ready(function(e) {
$("ul.navigation > li").click(function(e) {
    $sel = $(this).val();
    if($sel == 0)
        $("#schedule").show();
    else if($sel == 1) {
        $('#Hotel').fadeIn('slow');
    }
  });
});

从代码中删除show（）函数并像这样编辑

JQuery淡出效果

2 个答案: