Question

所以我对JavaScript非常陌生，不幸的是我也不太了解基础知识。

我正在制作一个代码，在点击它之后隐藏一个元素，然后通过单击相同的按钮再次反转效果，但我无法这样做。请帮我这里是代码：

$(function() {
    $('#boxclose').click(function(){
        $('#md-share-window').animate({'bottom':'-90px'},500,function(){});
    });
});

Answer 1

您需要获取初始位置（或硬编码）并跟踪您是处于初始位置还是更新位置：

$(function() {
    var shareWindow = $('#md-share-window');
    var initialPosition = shareWindow.css('bottom'); //get initial position
    var atInitialPos = true; //whether this is the initial or updated position

    $('#boxclose').on('click', function(){
        var newPosition = atInitialPos ? '-90px' : initialPosition; //determines new position
        shareWindow.animate({'bottom': newPosition}, 500);
        atInitialPos = !atInitialPos; //toggle initial position boolean
    });
});

Answer 2

您可以使用类来标识要设置动画的元素的状态。

以下是一个示例：http://jsfiddle.net/FgDaq/

$('#boxclose').click(function() {
    var c = 'on',
        el = '#md-share-window',
        duration = 500;

    if ($(el).hasClass(c)) {
        $(el).animate({'bottom': 0}, duration)
            .removeClass(c);
    } else {
        $(el).animate({'bottom': '-90px'}, duration)
            .addClass(c);
    }
});

单击“相同”按钮以反转Javascript效果

2 个答案: