Question

我想点击一个链接（.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是2000px宽，但只显示其中的一部分（取决于屏幕分辨率）。但是，当滑入时，它必须始终与其包含div的边缘相距480px。因此我需要一个“左”值。

任何帮助表示赞赏！

RT

Answer 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和百分比值之间切换！

Answer 2

使用这种方式的

toggle()已被弃用，因此你应该使用一个标志代替，而data()函数会使它变得相当容易。此外，从左侧动画到480px可以通过从窗口宽度中减去该值来获得您需要使用“右”来代替它的值：

$('.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);
});

jQuery动画 - 在左右值之间切换

2 个答案: