在获得切换效果时遇到了jQuery问题

Question

我试图得到一个切换的效果，按钮从左向右滑动。当您单击选项卡按钮时，该框将滑出(向左)，然后再次单击它，它将滑回(向右)。我尝试过几种不同的方法来做这件事，但似乎没有什么对我有帮助。

您可以在：http://jsfiddle.net/bcreed33/h2gug2zd/查看所有内容。

以下是我到目前为止在jQuery中所做的

 $(function () {
         $('#tab').click(
         function () { $('#sideBox').animate({ 'left': '0px' }, 500); })
    });

现在如果我做这样的事..。盒子就会滑出来，然后又回到.

   $(function () {
         $('#tab').click(
         function () { $('#sideBox').animate({ 'left': '0px' }, 500); }),
       $('#tab').click(
         function () { $('#sideBox').animate({ 'left': '-362px' }, 500); })

    });

Answer 1

jQuery的click函数只接受一个回调，您必须自己处理切换功能。

$(function () {
     $('#tab').click(function () { 
         var flag = $(this).data('flag');

         $('#sideBox').animate({ 'left': (flag ? -362 : 0) + 'px' }, 500);

         $(this).data('flag', ! flag)
    });
});

小提琴

Answer 2

下面是工作的代码：

$(function () {
     $('#tab').click(
         if($(this).hasClass('selected')){
             $(this).removeClass('selected');
             $('#sideBox').animate({ 'left': '-362px' }, 500);
         }else{
             $(this).addClass('selected')
             $('#sideBox').animate({ 'left': '0px' }, 500);
         }
     });
});

Answer 3

你需要跟踪你自己的切换。您可以做的是更改一个变量，该变量在动画完成后使用jquery .animate函数的回调来跟踪切换状态，在动画完成后调用这个回调函数。通过动态计算边框内容的宽度(存储在sideBoxContentWidth中)，如果您决定更改它或使用百分比度量使其成为相对大小，则切换将适应新的宽度。代码在下面--希望这能帮上忙！

编辑： 下面是，指向工作示例的小提琴的链接。

$(function () {
     var toggledOut = false,
         sideBoxContentWidth = $('#sideBoxContent').width();

     $('#tab').click(function () {
         var leftOffset = toggledOut ? '-' + sideBoxContentWidth : '0';

         $('#sideBox').animate({ 'left': leftOffset + 'px' }, 500, function() {
             toggledOut = !toggledOut;
         });
     });
});