从左向右滑动切换

Question

我正试图从左到右滑动div，例如结构如下：

链接位于页面的左下角（隐藏了display: none css属性的html表格），此链接从左到右单击隐藏的表格幻灯片。

这是我正在尝试的代码;

HTML：

    <div id="latest_threads_link">
        <a href="javascript:void(0)" id="latest_threads_click"><img src="images/latest_threads.png" alt="Latest Threads" title="Click Here to see latest threads of this section."></a>
        <table border="0" cellspacing="'.$theme['borderwidth'].'" cellpadding="'.$theme['tablespace'].'" class="tborder" style="display: none;" id="latest_threads_show">
            '.$forum_threads_bit.'
        </table>
    </div>

CSS：

#latest_threads_link{
    left:0;
    position:fixed;
    bottom:150px;
}

jQuery的：

jQuery(document).ready(function($){
  $('a[id^="latest_threads_click"]').on('click', function (e){
        e.preventDefault();
        $('#latest_threads_show').stop().slideToggle('slow');
    });
});

它的作用实际上是隐藏的表格，当我点击链接但没有滑动动画时，它只是显示像弹出页面。链接也会跳到顶部（而不是定位在同一个bottom: 150px上）

请帮忙

Answer 1

最简单的滑动动画方法是在jQuery UI中使用show / hide的附加功能。

$(document).ready(function(){
    $('#click').click(function (){
        $("#show").show('slide',{direction:'left'},1500);
    });
});

http://jsfiddle.net/rjzJp/