javascript - jQuery滑动函数

Question

我有一个有效的 jQuery 滑动函数，我已经在下面发布了。我从这个网站上的另一个问题得到它。这很棒。但我现在希望它朝相反的方向发展。

我用它从左向右滑动。我尝试在 animate 函数中添加一个减号 (-) 以使其成为 {'-width': 'toggle'} 但这只是让它打开和关闭而不是滑动。我确信这很简单，我只是对此感到沮丧。

JS
$(document).ready(function(){
    $('.pull-me').click(function(){
    $('.panel p').css({
        'width': $('.panel p').width(),
        'height': $('.panel p').height()
    });
    $('.panel').animate({'width': 'toggle'});
    });
});

和 html

html
<div class="panel">
        <p id="novelDescrip">A website for a local musician to market, stream, and distribute music and merchandise. Content design and development</p>
    </div>
</div>
<p class="slide"><div class="pull-me">Slide Out!</div></p>

当我单击“更多信息”选项卡时，我希望该面板向左滑出。然后，如果他们再次单击“更多信息”选项卡，它应该会关闭并返回到“更多信息”选项卡的右侧。

有没有一种方法可以反转我正在使用的函数的方向？

Answer 1

试试这个:

http://jsfiddle.net/FL87t/3/

$(document).ready(function(){
    $('.pull-me').click(function(){
        if ($('.panel').is(":hidden")) 
        {
            $('.panel').show('slide', { direction : 'left'}, 500);
        }
        else
        {
            $('.panel').hide('slide', { direction : 'right'}, 500);
        }
    });
});