Jquery动画放大/缩小一个div点击(2次点击)

Question

我试图使此代码停止后的前半部分，然后当你再次点击它收缩。点击2下

我该如何做到这一点?

$('#container').click(function () {
    $(this).animate({
        'width': '400px',
        'height': '400px',
        'left': '90px',
        'top': '90px'
    }, 200);
    $(this).animate({
        'width': '200px',
        'height': '200px',
        'left': '90px',
        'top': '90px'
    }, 200);
});

JS小提琴

我在Stack Overflow上看过所有与此相关的问题，没有一个允许你点击要调整大小的项目

Answer 1

如果您只是想要切换效果，有几种不同的方法可以实现。

第一种方法是跟踪应用程序中图像的"状态"。

var enlarged = false;
$('#container').click(function () {
    $(this).stop(true, false).animate({
        width: enlarged ? 200 : 400,
        height: enlarged ? 200 : 400,
        left: 90,
        top: 90
    }, 200);
    enlarged = !enlarged;
});

http://jsfiddle.net/mmk2c4vn/4/

第二种方法是写入数据缓存，并通过这种方式跟踪图像状态。

$('#container').click(function () {
    var _this = $(this),
        enlarged = _this.data('enlarged') || 0;
   _this.stop(true, false).animate({
        width: enlarged ? 200 : 400,
        height: enlarged ? 200 : 400,
        left: 90,
        top: 90
    }, 200);
    _this.data({ enlarged: !enlarged });
});

http://jsfiddle.net/mmk2c4vn/6/

当然，这只是许多方法中的两种。

Answer 2

你需要一些东西来存储你的元素上的状态，可能使用元素上的data属性。这样的

$('#container').click(function () {
    if ($('#container').data('state') === '0') { //check the state
        $(this).animate({
            'width': '400px',
                'height': '400px',
                'left': '90px',
                'top': '90px'
        }, 200);
        $('#container').data('state', '1'); //store the state on the element
    } else {
        $(this).animate({
            'width': '200px',
                'height': '200px',
                'left': '90px',
                'top': '90px'
        }, 200);
        $('#container').data('state', '0'); //store the state on the element
    }
});

http://jsfiddle.net/mmk2c4vn/5/

但是如果你经常使用这个你需要使用类选择器而不是ID的

$('.container').click(function () {
    if ($(this).data('state') === '0') {
        $(this).animate({
            'width': '400px',
                'height': '400px',
                'left': '90px',
                'top': '90px'
        }, 200);
        $(this).data('state', '1');
    } else {
        $(this).animate({
            'width': '200px',
                'height': '200px',
                'left': '90px',
                'top': '90px'
        }, 200);
        $(this).data('state', '0');
    }
});

http://jsfiddle.net/mmk2c4vn/13/

在你的元素上存储一些状态比暴露一个全局变量要好得多，这就是为什么我不建议你为切换而创建另一个变量，你可以使用状态作为引用。

如果$('#container').data('state') 不起作用，可以使用$('#container').attr('data-state')

参考

: http://api.jquery.com/jquery.data/

Answer 3

试试这个:

var clicks = 0;
$('#container').click(function () {
    clicks++;
    if (clicks % 2 !== 0) {
        $(this).animate({
            'width': '400px',
            'height': '400px',
            'left': '90px',
            'top': '90px'
        }, 200);
    } else {
        $(this).animate({
            'width': '200px',
            'height': '200px',
            'left': '90px',
            'top': '90px'
        }, 200);
    }
});