循環爲jquery點擊

我想知道如果有人可以幫我一個jQuery的循環或腳本。當一個按鈕被點擊時，我會想動畫一個div在屏幕上滑動，當再次點擊時另一個div滑落。再次點擊該按鈕時，另一個div等等，等等。循環爲jquery點擊

下面是HTML標記香港專業教育學院迄今所做

<div class="page-container"> 

<h2 class="gallery-heading"> WAIKANAE BEACH HOUSE </h2> 
    <img src="images/waikanae/next button.png" id="gallery-next"/> 


    <div id="slider"> 

     <section class="horizontal-gallery"> 
     <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/> 
     <p class="horizontal-gallery-text">Test text.</p> 
     </section> 

     <section class="vertical-gallery"> 
     <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/> 
     <p class="horizontal-gallery-text">Test text.</p> 
     </section> 

     <section class="horizontal-gallery"> 
     <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/> 
     <p class="horizontal-gallery-text">Test text.</p> 
     </section> 

    </div> 

$('#gallery-next').click(function() { 
    $('.horizontal-gallery').hide('slide',{direction:'left'},1000); 
});

來源

2013-02-14 Spade

我已經在這個問題添加，但也沒辦法。我應該使用循環嗎？ – Spade 2013-02-14 02:44:40

問題目前還不清楚。你想爲每張幻燈片製作不同的動畫嗎？ – 2013-02-14 02:50:44

與同一班級的div相同的動畫。垂直畫廊垂直滑動 – Spade 2013-02-14 02:52:26

根據你所描述的，你需要：

$('div selector').hide('slide',{direction:'right'},1000);

而且也：

$('button').click(function() { 
    //sliding code 
});

見：http://docs.jquery.com/UI/Effects/Slide And：http://api.jquery.com/click/

來源

2013-02-14 02:39:17 kufudo

我懷疑你的帖子被downvoted b/c有人不明白hide（'slide'）方法來自jQueryUI並且需要那個圖書館。你的解決方案包含答案，所以我倒推了downvote。（是的，我看到您在源代碼中引用了jQueryUI，但至少有一個人錯過了它）。 – gibberish 2013-02-14 19:42:49

感謝您的備份！我想我可以盡力寫一個更全面的例子，但由於這個問題很模糊，所以我沒有打擾。 – kufudo 2013-02-15 10:50:21

這可能不是正好你想要什麼，但希望你會找到一些有用的代碼想法。採取什麼行之有效的方法，併發布另一個問題來微調您的解決方案。它看起來有點混亂，因爲我在頁面中包含了JavaScript和樣式表，而不是將它們分別放在單獨的文檔中。

請注意，hide（'slide'）方法來自jQueryUI，您也必須包含該庫。

還要注意，ID已添加到每個節元素，因爲根據另一個不幸刪除其帖子的海報的建議。

這是一個完全工作示例（只是確保圖像存在。它們可以是不同的圖像）

<html> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     var totalslides = 3; 
     var slidenum = 0; 
     var slidenext = 0; 
     var slideType = ''; 
     $(function(){ 
      $('#gallery-next').data('counter',1); 
      $('#gallery-next').click(function() { 
       slidenum = parseInt($('#gallery-next').data('counter')); 
       slidenext = slidenum+1 
       slideType = $('#'+slidenum+'-slide').attr('class') 
       slideType = slideType.split('-')[0] 
       if (slideType=='horizontal') slideType='up'; 
       else slideType = 'left'; 
//alert('Next slideType is: ' + slideType) 
       //hide(slide) is a jQueryUI function, so ensure you include that lib 
       $('#'+slidenum+'-slide').hide('slide',{direction:slideType},500); 
       $('#'+slidenext+'-slide').fadeIn(1000); 
       slidenum = slidenum % totalslides + 1; 
       $('#gallery-next').data('counter',slidenum); 
      }); 
     }); 
    </script> 
    <style type="text/css" > 
     .init-hidden {display:none;} 
    </style> 
</head> 
<body> 
<div class="page-container"> 

    <h2 class="gallery-heading"> WAIKANAE BEACH HOUSE </h2> 
    <img src="images/waikanae/next button.png" id="gallery-next"/> 

    <div id="slider"> 
     <section id="1-slide" class="horizontal-gallery"> 
      <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/> 
      <p class="horizontal-gallery-text">Test text.</p> 
     </section> 

     <section id="2-slide" class="vertical-gallery init-hidden"> 
      <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-vertical"/> 
      <p class="vertical-gallery-text">Test text.</p> 
     </section> 

     <section id="3-slide" class="horizontal-gallery init-hidden"> 
      <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/> 
      <p class="horizontal-gallery-text">Test-text.</p> 
     </section> 
    </div> <!-- endDiv slider --> 
</div> <!-- endDiv page-container --> 
</body> 
</html>

來源

2013-02-14 19:26:30 gibberish

非常感謝您的幫助，幾乎完全符合我在幾次css更改之後的工作。謝謝 – Spade 2013-02-17 21:02:46

最後一個小問題是，當圖像向上滑動時，您只能看到少量的幻燈片，然後從現有圖像的位置淡入。任何想法如何解決這個問題？ – Spade 2013-02-17 21:22:57

不是副手，沒有。你應該就這個問題的這個方面提出另一個問題。不要猶豫，發佈有關同一問題的不同方面的多個問題。順便說一句，最好總是接受你的帖子的答案，並注意任何其他有用的帖子，包括評論。這將有助於您獲得SO的重要意見，並會鼓勵他人爲您提供更多幫助。 – gibberish 2013-02-19 17:20:03

循環爲jquery點擊

回答

相關問題