jquery滑动div

Question

我需要使用内容滑动div：在链接点击时，div应该从右向左滑动，当我点击第二个链接时，可见的div应该向右滑动并且div带有新内容应该从右向左滑出...... 我使用历史插件，因为我的页面应该加载dinamicaly： jQuery（document）.ready（function（$）{

        function load(num) {
            $('.leftside').load(num +".html",'',showNewContent());
        }

        $.history.init(function(url) {
            load(url == "" ? "page1" : url);
        });
        function showNewContent() {

            $(".leftside").css('left', function(){ 
                return $(".rightside").offset().left - $(".navigation").offset().left; })
             .animate({"left":"0px"}, {
                                        duration: 2000,
                                        specialEasing: {
                                          width: 'linear',
                                          height: 'swing'
                                        }
                                    });  
        }
        function hideLoader() {
            $('.leftside').fadeOut('normal');



        }
        $('.main-nav a').live('click', function(e) {
            var url = $(this).attr('href');
            url = url.replace(/^.*#/, '');
            $.history.load(url);
            return false;
        });

});

html是这样的：

    <div class="leftside"></div> 
<div class="navigation">
    <div class="main-nav">
    <ul>
    <li><a href="#page1">link 1</a></li>
    <li><a href="#page2">link 2</a></li>
    </ul>
    </div>
</div>

JS代码有效，但div不会像我上面描述的那样滑动...你知道怎么做吗？

Answer 1

如果有人感兴趣，我找到了一个解决方案 - 非常简单：

$('.main-nav a').live('click', function (e) {
  var url = $(this).attr('href');
  url = url.replace(/^.*#/, '');
  if ($('.leftside').is(':visible')) {
    $('.leftside').stop().animate({
      left: '360px'
    }, {
      duration: 2000,
      specialEasing: {
        width: 'linear',
        height: 'swing'
      }
    }).animate({
      left: '0px'
    }, 1000);
  } else {
    $('.leftside').stop().animate({
      left: '0px'
    }, 1000);
  }
  $.history.load(url);
  return false;
});