Question

我创建了一个animate()方法，该方法从点击元素的data-属性中获取动画的推送方向和时间：

HTML

<div class="caja" data-empuje="top" data-tiempo="500">Caja 1</div>
<div class="caja" data-empuje="left" data-tiempo="100">Caja 2</div>
<div class="caja" data-empuje="right" data-tiempo="400">Caja 3</div>
<div class="caja" data-empuje="bottom" data-tiempo="900">Caja 4</div>

JS

$('.caja').on('click', function(){

            var empuje = $(this).data('empuje');
            var tiempo = $(this).data('tiempo');

            var stringEmpuje = "margin-" + empuje;      //alerts correctly (for example, 'margin-top')

            $(this).animate({
                stringEmpuje: '-=40px',
                opacity: 0
            }, tiempo);
        });

时序正常，但即使stringEmpuje var正确警告最终字符串，方向也不适用，并且应该被jQuery识别为CSS属性，但它不适用。

LIVE DEMO

Answer 1

您似乎试图将stringEmpuje的值作为animate方法的关键字传递给您。如果是这样，试试这个：

$('.caja').on('click', function(){

    var empuje = $(this).data('empuje');
    var tiempo = $(this).data('tiempo');

    var stringEmpuje = "margin-" + empuje;
    var animOptions = {
        opacity: 0
    };
    animOptions[stringEmpuje] = '-=40px';

    $(this).animate(animOptions, tiempo);
});

使用ES2015，你可以做到：

$('.caja').on('click', function(){

    var empuje = $(this).data('empuje');
    var tiempo = $(this).data('tiempo');

    var stringEmpuje = "margin-" + empuje;

    $(this).animate({
        [stringEmpuje]: '-=40px',
        opacity: 0
    }, tiempo);
});

Jquery animate方法在concat之后无法识别属性

1 个答案: