3

I am trying to make a simple slide effect but it is not working the way I want, please help me out. if anyone can point me in the right direction i would appreciate it.

  1. what I want to do is have the div slide up as one div not 2 div. when you click on a button the div slides down/up before the arrow head, I would like both the arrow head and the div to slide up/down.

  2. when the user clicks on a button the other open div slides up before the clicked button div slides down.

here is an example of my work.

DEMO: http://jsfiddle.net/dSCxJ/

<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',
        }
      );
    }   
});

thanks in advance

4

1 回答 1

0

作为一个选项，您可以为上滑和下滑创建自己的小功能（或 jquery 插件），它们使用 jquery 动画更改不透明度和位置，这将解决箭头问题。slideup 可能有一个函数参数，将在动画结束时执行，以便您可以使用后续动画

$.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-26T11:00:41.453 回答