jQuery Slide effect slides div separately -
i trying make simple slide effect not working way want, please me out. if can point me in right direction appreciate it.
what want have div slide 1 div not 2 div. when click on button div slides down/up before arrow head, both arrow head , div slide up/down.
when user clicks on button other open div slides before clicked button div slides down.
here example of 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
as option, can create own small functions (or jquery plugins) slideup , slidedown, use jquery animation changing opacity , position, solve arrow problem. slideup may have function argument executed in end of animation, use subsequent animations
$.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(); }); }); } then can check if there visible tooltips, use subsequent animation, else show necessary tooltip
if ($('.document_wrapper:visible').length>0) $('.document_wrapper:visible').myslideup(function(){ $(''+div+'').myslidedown(); }); else $(''+div+'').myslidedown(); have i've updated jsfiddle
Comments
Post a Comment