Question

尝试在点击上做一个简单的动画。当用户点击我希望面板滑出的标签时，我有一个隐藏在右侧（绝对定位）的面板。我可以让初始幻灯片工作但不能让切换功能正常运行

 $('#sideTab').click(function() {
           $('#sideCol').animate({'right':'0%'}) 
        }, function ()
            $('#sideCol').animate({'right':'-50%'})                    
        });


 $('#sideTab').toggle(function() {
           $('#sideCol').animate({'right':'0%'}) 
        }, function ()
            $('#sideCol').animate({'right':'-50%'})                    
        });

这些都不起作用

小提琴：http://jsfiddle.net/BQE32/1/

单击绿色方块时，蓝色方块应向左移动，再次单击时应移回原始位置

Answer 1

click不接受两个回调函数，您可以阅读right属性并设置正确的值：

$('#sideTab').click(function () {
    var $e = $('#sideCol');
    $e.animate({
       'right': $e.css('right') === '0px' ? '-50%' : '0px'
    });
});

http://jsfiddle.net/Jrs36/

您还可以使用CSS transition属性和jQuery .toggleClass()方法：

CSS：

#sideCol {
   -webkit-transition: right 400ms;
   -moz-transition: right 400ms;
   -o-transition: right 400ms;
   transition: right 400ms; 
} 

#sideCol.right50 {
    right: 50%;
}

JavaScript的：

$('#sideTab').click(function () {
    $('#sideCol').toggleClass('right50');
});

Answer 2

$('#sideTab').on('click', function() {
    if ($(this).hasClass('toggled') === true) {
        $(this).animate({'right': '-50%'}).removeClass('toggled');
    } else {
        $(this).animate({'right': '0'}).addClass('toggled');
    }
});

这将检查侧边栏是否已经“切换”，如果是，则将删除该类并将其设置回框架外（反之亦然）。

Answer 3

您可以在此处使用toggle()：

$('#sideTab').toggle(function() {
  $('#sideCol').animate({'right':'0%'}) 
}, function() {
  $('#sideCol').animate({'right':'-50%'}) 
});

Demo

切换jQuery动画不起作用

3 个答案: