javascript - 单击相同按钮以反转 Javascript 效果

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);
    }
});