JqueryUI「幻燈片」效果不起作用

我正在使用jQueryUI在網站項目中，幻燈片效果在沒有div的DIV（#sectionOverlay）中工作正常。當我試圖與它裏面的div更適用於一個DIV相同的（被點擊時#btnClose，#sectionInfo只是消失）出現問題JqueryUI「幻燈片」效果不起作用

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

}

來源

2013-03-04 Eatier

在代碼中的幾個錯誤。讓我們看看我們可以修復什麼，然後從那裏開始。 [編輯代碼]在本地編輯和設置後，我所看到的只是一個空白屏幕。編輯批准後，請在其中獲取一些內容，包括按鈕，然後查看幻燈片問題。

來源

2013-03-04 19:43:33 SushiGuy

JqueryUI「幻燈片」效果不起作用

回答

相關問題