如何在顯示元素後啓動圖像滑塊

我目前有一個問題，我的flexslider圖像庫正在初始化頁面加載和中斷功能。這是因爲flexslider包含在摺疊的jquery移動選項卡中，該選項卡設置爲display: none。如何在顯示元素後啓動圖像滑塊

保存可摺疊內容的實際div在jquery移動腳本中生成，並且不能在前端附加自定義ID。我插入了一個設置爲display:none的額外容器，以便在元素可見後我可以初始化滑塊。

這是我現在有和沒有工作的代碼：

<script type="text/javascript"> 

$(document).ready(function(){ 

    $('#first_tab').click(function(){ 

     $('#slider_contents').css('display', 'block'){ 
    }); 
}); 

    if ($('#slider_contents').is(':visible')) { 

      $('.flexslider').flexslider({ 
       animation: "slide", 
      controlsContainer: ".flex-container" 

      }); 

     } else {} 
    }); 
</script>

HTML標記：

<div data-role="collapsible" id="first_tab"> 
      <h3>WORK</h3> 
      <div id="slider_contents"> 
       <div class="flex-container"> 
        <div class="flexslider"> 
        <ul class="slides"> 
         <li> 
          <img src="img/inacup_samoa.jpg" /> 
          <p class="flex-caption">Captions and cupcakes. Winning combination.</p> 
         </li> 
         <li> 
          <a href="#"><img src="img/inacup_pumpkin.jpg" /></a> 
          <p class="flex-caption">This image is wrapped in a link!</p> 
         </li> 
         <li> 
          <img src="img/inacup_donut.jpg" /> 
         </li> 
         <li> 
          <img src="img/inacup_vanilla.jpg" /> 
         </li> 
        </ul> 
        </div> 
       </div> 
</div>

CSS樣式：

#slider_contents{ 
    max-width: 620px; 
    margin: 0 auto; 
    display: none; 
    } 

     .flexslider {width: 100%; margin: 0; padding: 0;} 
     .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded.  Avoids image jumping */ 
     .flexslider .slides img {max-width: 100%; display: block;} 
     .flex-pauseplay span {text-transform: capitalize;}

任何援助將大大讚賞。我嘗試了很多不同的東西，似乎沒有任何工作。

感謝

來源

2011-12-01 Andrew

你DOM加載後添加#first_tab或#slider_contents？ –

不完全確定。我是JS和jQuery的新手，所以我還沒有完全理解DOM事件和加載的順序。我怎麼知道？ – Andrew

你不需要的{在這裏

$('#slider_contents').css('display', 'block'){

結束還有if語句是.ready函數外

試試這個

<script type="text/javascript"> 

    $(document).ready(function(){ 

    $('#first_tab').click(function(){ 

     $('#slider_contents').css('display', 'block'); 

    }); 

    if ($('#slider_contents').is(':visible')) { 

     $('.flexslider').flexslider({ 
      animation: "slide", 
     controlsContainer: ".flex-container" 

     }); 

    } else {} 

    }); 


</script>

來源

2011-12-01 17:28:56

如何在顯示元素後啓動圖像滑塊

回答

相關問題