jQuery animate - 在左右值之间切换答案

【问题标题】：jQuery animate - toggle between left and right valuesjQuery animate - 在左右值之间切换
【发布时间】：2012-11-08 18:14:04
【问题描述】：

我希望通过单击链接 (.toggle-caption) 从右侧将 div 滑动到屏幕上和屏幕外

当两个值都基于它们从右侧的位置时，我可以正常工作，例如

$('.toggle-caption').toggle(
        function()
            {
            $('#caption-box').animate({right: "480px"}, 500);
            },
        function()
            {
            $('#caption-box').animate({right: "-2000px"}, 500);
            }
);

但是，当尝试在左值和右值之间切换时，它会停止工作：

$('.toggle-caption').toggle(
        function()
            {
            $('#caption-box').animate({left: "480px"}, 500);
            },
        function()
            {
            $('#caption-box').animate({right: "-2000px"}, 500);
            }
    );

#caption-box 的宽度为 2000 像素，但只会显示其中的一部分（取决于屏幕分辨率）。但是，当滑入时，它必须始终离开其包含 div 的边缘 480px。因此我需要一个“左”值。

任何帮助表示赞赏！

【问题讨论】：

标签： jquery-animate jquery

【解决方案1】：

我最终使用了以下，效果很好：

$('.toggle-caption').toggle(
    function()
        {
        $('#caption-box').animate({left: "480px"}, 500);
        },
    function()
        {
        $('#caption-box').animate({left: "100%"}, 500);
        }
);

请注意，使用的是 jQuery v 1.8.2 - Webkit 浏览器似乎不喜欢在早期版本中在 px 和百分比值之间切换！

【讨论】：

【解决方案2】：

toggle() 以这种方式使用已被弃用，因此您可能应该使用一个标志，而data() 函数将使这变得相当容易。此外，从左侧动画到 480px 可以通过从窗口宽度中子跟踪该值来获得您需要将其与“right”一起使用的值：

$('.toggle-caption').data('state', true).on('click', function() {
    var state = $(this).data('state'),
        dist  = state ? $(window).width() - 480 : -2000;
    $('#caption-box').stop(true, true).animate({right: dist}, 500);
    $(this).data('state', !state);
});

【讨论】：