我正在尝试制作一个简单的幻灯片效果，但它没有按我想要的方式工作，请帮帮我。如果有人能指出我正确的方向，我会很感激。
我想要做的是将div滑动为一个div而不是2 div。当你点击一个按钮时，div在箭头前向下/向上滑动，我希望箭头和div都可以向上/向下滑动。
当用户点击按钮时，其他打开的div会在点击的按钮div向下滑动之前向上滑动。
这是我工作的一个例子。
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',
}
);
}
});
提前致谢
答案 0 :(得分：0)
作为一个选项，你可以为slideup和slidingown创建自己的小函数（或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