JqueryUI "slide"效果不起作用

Question

我在一个网站项目中使用jQueryUI，幻灯片效果在没有div的div (#sectionOverlay)中效果很好。问题出现时，我试图应用相同的DIV与更多DIV内部(当#btnClose被点击，#sectionInfo只是消失)

http://jsfiddle.net/fB4bw/

希望你能帮助我，问候!

HTML:

<div id="sectionCarrousel">
            <div class="carrousel_navigation" id="navPrev"></div>
            <div id="sectionProducts" class="imageflow"></div>
            <div class="carrousel_navigation" id="navNext"></div>
            <div id="sectionInfo">
                <img id="imgTitle" src="img/chips/1_name.png" alt="" />
                <a id="btnClose">
                    <img src="img/button_close.png" alt="" />
                </a>
                <div id="sectionDescription">
                    <p>PLACE HOLDER TEXT: consectetur adipiscing elit. Phasellus lacinia consequat enim. Suspendisse gravida pellentesque dui, sed commodo ligula auctor ut. Duis scelerisque vehicula neque, vel ultrices ipsum aliquam in. In eget erat id nulla elementum rutrum. Aliquam at est nibh, ac elementum est. Donec quis ligula vel ipsum vestibulum rutrum vel eget magna. Morbi ultricies convallis ultrices. Donec a urna eu augue mattis ullamcorper sit amet eget lectus. Praesent mauris dui, posuere eget dignissim at, cursus vitae mi. Suspendisse convallis lacinia ligula, vel porttitor arcu euismod at. Sed tincidunt massa in justo consequat ac feugiat risus ornare. Maecenas accumsan risus at dui hendrerit molestie. Proin eu eros nec diam dignissim consequat sit amet mollis ipsum. Vestibulum tincidunt ligula ac purus dictum porttitor.</p>
                </div>
                <div id="sectionShare">
                    <img src="img/txt_share.png" alt="" />
                    <a href="http://www.facebook.com/sharer.php?u=<?=URL?>" target="_blank">
                        <img src="img/icon_facebook.png" alt="" />
                    </a>
                    <a href="http://twitter.com/home?status=<?=TXT_TW_SHARE?> <?=URL?>" target="_blank">
                        <img src="img/icon_twitter.png" alt="" />
                    </a>
                </div>
            </div>
            <div id="sectionLogoBarcel"></div>
        </div>
    </div>
    <div id="sectionOverlay"></div>

CSS:

    #sectionCarrousel
{
    position: relative;
    top: 90px;
    height: 415px;
    /*width: 100%;*/
    /*min-width: 1280px;*/
    text-align: center;
    /*margin-bottom: 100px;*/
}
#sectionOverlay
{
    background-color: #260101;
    opacity: 0.8;
    z-index: 200;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
#sectionInfo
{
    background-color: #4EA012;
    height: 300px;
    left: 230px;
    margin: 0 auto;
    position: relative;
    margin-top: -345px;
    width: 300px;
    z-index: 490;
    visibility: hidden;
}

JS:

function HideInfo()
{
    $("#sectionInfo").hide("slide", { direction: "right" }, 1000);
    $("#sectionOverlay").fadeOut(500);

//    blnOverlayVisible = false;
}
function changeInfo(id, force)
{
    if(force)
    {
        $("#sectionOverlay").fadeIn(500);
        blnOverlayVisible = true;
    }
    else
    {
        if(!blnOverlayVisible) return;
    }
    var description = "";
    $("#sectionInfo").fadeOut(function()
    {
        for(var i in products)
        {
            if(products[i].id == id)
            {
                description = products[i].description;
                break;
            }
        }
        $("#imgTitle").attr("src", "img/chips/" + id + "_name.png");
        $("#sectionDescription p").html(description);
        $(this).fadeIn().css("visibility","visible");
    });
$("#btnClose").click(HideInfo);

}

Answer 1

代码中的几个错误。让我们看看我们能解决什么，然后从那里开始。[编辑代码]在本地编辑和设置后，我看到的是一个空白屏幕。编辑通过后，在里面添加一些内容，包括按钮，我们来看看幻灯片问题