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的点击功能只接受一个回调，你必须自己处理切换功能。

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

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

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

FIDDLE

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中），如果您决定使用百分比测量来更改它或使其成为相对大小，则切换将适应新的宽度。代码如下 - 希望这有帮助！

编辑： here's指向工作示例小提琴的链接。

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

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

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

有一个jQuery问题获得切换效果

3 个答案: