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“幻灯片”效果不起作用

回答

相关问题