jQuery幻燈片效果幻燈片div分開

我想做一個簡單的幻燈片效果，但它不工作，我想要的方式，請幫助我。如果任何人都可以指出我正確的方向，我將不勝感激。jQuery幻燈片效果幻燈片div分開

我想要做的是有div滑動爲一個div不是2 div。當你點擊一個按鈕時，div在箭頭前向下/向上滑動，我希望箭頭和div可以向上/向下滑動。
當用戶點擊一個按鈕時，另一個打開的div向上滑動，然後點擊按鈕div滑落。

這是我工作的一個例子。

<div id="main_content"> 

       <ul class="categories_list"> 

        <li class="animated"> 
        <a href="#propsal_templates" class="main_buttons"> 
          <span class="category_list_titles"> 
           <table width="150" border="0" cellspacing="0" cellpadding="0"> 
           <tr> 
            <td height="150" align="center" valign="middle">Proposal Templates</td> 
           </tr> 
           </table> 
          </span> 
         </a> 
        </li> 

        <li class="animated"> 
        <a href="#2" class="main_buttons"> 
          <span class="category_list_titles"> 
           <table width="150" border="0" cellspacing="0" cellpadding="0"> 
           <tr> 
            <td height="150" align="center" valign="middle">Site Lists</td> 
           </tr> 
           </table> 
          </span> 
         </a> 
        </li> 

       </ul> 

       <div id="propsal_templates" class="document_wrapper" style="display:none;"> 
         <div class="chat-bubble-arrow-border1"></div> 
         <div class="chat-bubble-arrow1"></div> 
          <table width="950" border="0" cellspacing="10" cellpadding="10"> 
          <tr> 
           <td width="316" valign="middle"> 
           <a href="test.docx"> 
            <span class="icon powerpoint_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
           <td width="316" valign="middle"> 
           <a href="test.docx"> 
            <span class="icon pdf_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
           <td width="310" valign="middle"> 
           <a href="test.docx"> 
            <span class="icon excel_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
          </tr> 
          <tr> 
           <td valign="middle"> 
           <a href="test.docx"> 
            <span class="icon word_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
           <td valign="middle"> 
           <a href="test.docx"> 
            <span class="icon powerpoint_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
           <td valign="middle"> 
           <a href="test.docx"> 
            <span class="icon powerpoint_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
          </tr> 
          <tr> 
           <td valign="middle"> 
           <a href="test.docx"> 
            <span class="icon word_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
           <td valign="middle"> 
           <a href="test.docx"> 
            <span class="icon powerpoint_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
           <td valign="middle"> 

           </td> 
          </tr> 
          </table> 
         </div> 

       <div id="2" class="document_wrapper" style="display:none;"> 
         <div class="chat-bubble-arrow-border2"></div> 
         <div class="chat-bubble-arrow2"></div> 
          <table width="950" border="0" cellspacing="10" cellpadding="10"> 
          <tr> 
           <td width="316" valign="middle"> 
           <a href="test.docx"> 
            <span class="icon powerpoint_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
           <td width="316" valign="middle"> 
           <a href="test.docx"> 
            <span class="icon pdf_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
           <td width="310" valign="middle"> 
           <a href="test.docx"> 
            <span class="icon excel_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
          </tr> 
          <tr> 
           <td valign="middle"> 
           <a href="test.docx"> 
            <span class="icon word_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
           <td valign="middle"> 
           <a href="test.docx"> 
            <span class="icon powerpoint_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
           <td valign="middle"> 
           <a href="test.docx"> 
            <span class="icon pdf_icon"></span> 
            <span class="doc_name">General</span> 
           </a> 
           </td> 
          </tr> 
          </table> 
         </div>

//centers categories names 
jQuery.fn.center = function(){ 
    this.css("position","absolute"); 
    this.css("top","50%"); 
    this.css("left","50%"); 
    this.css("margin-top","-"+(this.height()/2)+"px"); 
    this.css("margin-left","-"+(this.width()/2)+"px"); 
    return this; 
} 
$(".category_list_titles").center(); 

//button action 
$('ul.categories_list li a.main_buttons').click(function(e) { 
    e.preventDefault(); 

    var div = $(this).attr("href"); 
    //alert(div); 

    if($(this).hasClass('selected_button')) 
    { 
     $(this).removeClass('selected_button'); 
     //$(''+div+'').fadeOut(); 
     $(''+div+'').slideUp(
      { 
       duration: 500, 
       easing: 'easeInQuad', 
      } 
     ); 
    } 
    else 
    { 
     $('ul.categories_list li a.main_buttons').each(function(i) { 
      $('ul.categories_list li a.main_buttons').removeClass('selected_button'); 
      //$('.document_wrapper').css('display', 'none'); 
      $('.document_wrapper').slideUp(
      { 
       duration: 500, 
       easing: 'easeInQuad', 
      } 
     ); 
     }); 

     $(this).addClass('selected_button'); 
     //$(''+div+'').fadeIn(); 
     $(''+div+'').slideDown(
     { 
      duration: 500, 
      easing: 'easeInQuad', 
     } 
    ); 
    } 
});

在此先感謝

來源

2013-05-13 Hectorubie

我不知道如果這是你問什麼，你要效果基本show，當效果基本show完成，效果基本show箭頭爲連續動畫？如果這是檢查http://api.jquery.com/slideDown/，你可以使用完整的方法。當你的滑動完成時，在箭頭div上做另一個幻燈片 – joao 2013-05-13 17:45:43

如果你正在動畫多個項目然後'slideUp/down'似乎同時動畫。爲了避免這種情況，您只需要爲一個元素設置動畫效果並在'slideUp'上使用回調，或者使用'.done（）'確保所有動畫都已完成。我已經更新了你的jsFiddle的動畫，但不是箭頭。 http://jsfiddle.net/dSCxJ/1/ – Klors 2013-05-13 18:17:07

您可以通過在jQuery中使用盲效應來解決箭頭問題，但它看起來不太好，並且由於CSS而出現一些動畫問題。看到這個jsFiddle http://jsfiddle.net/dSCxJ/2/ – Klors 2013-05-13 18:32:22

作爲一個選項，可以爲效果基本show和了slideDown，它使用jQuery創建您自己的小功能（或jQuery插件）改變不透明度和位置的動畫，這將解決箭頭問題。效果基本show可能會在動畫的最後執行的函數參數，這樣就可以使用後續動畫

$.fn.mySlideDown = function (options) { 
    return this.each(function() { 
     $(this).stop(true,true) 
      .css({"opacity": 0, "top":"-225px"}).show() 
      .animate({ "opacity":1,"top":"-25px"}); 
    }); 
} 

$.fn.mySlideUp = function (onend) { 
    return this.each(function() { 
     $(this).stop(true,true) 
      .css({"opacity": 1, "top":"-25px"}).show() 
      .animate({ "opacity":0,"top":"-225px"}, function(){ 
       $(this).hide(); 
       if (onend) onend(); 
       }); 
    }); 
}

那麼你可以檢查是否有任何可見的提示，用後續的動畫，否則只顯示必要的提示

  if ($('.document_wrapper:visible').length>0) 
       $('.document_wrapper:visible').mySlideUp(function(){ 
        $(''+div+'').mySlideDown(); 
       }); 
      else 
       $(''+div+'').mySlideDown();

看看我已經更新了你的jsfiddle

來源

2013-05-26 11:00:41 paulitto

jQuery幻燈片效果幻燈片div分開

回答

相關問題