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分开

回答

相关问题