2

.animate()配列から作成された方向を持つJQuery を使用して、連続的なアニメーション効果を作成したいと考えています。これは私がこれまでに成功したことです：

var animation = [{"top":80},{"left":130},{"top":200},{"left":0},{"top":0}];

$.each(animation, function(i) {
    $('div').animate(animation[i], 1000);
});

しかし、次のように各要素属性に配列を保存したいと思います。

<div data-animation='[{"top":80},{"left":130},{"top":200},{"left":0},{"top":0}]'></div>
<div data-animation='[{"top":50},{"left":-30},{"top":100},{"left":80},{"top":75}]'></div>
<div data-animation='[{"top":10},{"left":-30},{"top":100}]'></div>

...だから、複数の要素を異なる方向にアニメーション化できるといいのですが。しかし、属性値をオブジェクトの配列に変換する方法がわかりません (プラグインなしでこれを実行できることを願っています):

$('div').each(function() {

    var animation = $(this).data('animation'), // How to convert this into an array?
        $animatedbox = $(this);

    $.each(animation, function(i) {
        $animatedbox.animate(animation[i], 1000);
    });

});

ここにデモがあります： http://jsfiddle.net/wthLR/

4

3 に答える 3

2 
$('div').each(function() {

    var animation = eval($(this).attr('data-animation')),
        $animatedbox = $(this);

    $.each(animation, function(i) {
        $animatedbox.animate(animation[i], 1000);
    });

});

これは動作します

于 2012-12-28T03:10:24.717 に答える
2

これを試して：

$('div').each(function(){
    var $div = $(this);
    var animation = eval($div.attr('data-animation'));
    $.each(animation, function(i) {
        $div.animate(animation[i], 1000);
    });
});

JSFiddle の例

于 2012-12-28T02:51:10.283 に答える
1

eval邪悪な機能を使用したくない場合は、これを使用できます。

$('div').each(function () {
    var $div = $(this);
    var data = $div.data('animation').replace(/[[\]]/g,'');
    var dataArray = data.split(',');
    var animations = {};

    for (var i = 0; i < dataArray.length; i++) {
        var trimBrackets = dataArray[i].replace(/[{\}]/g,'');
        var keyValues = trimBrackets.split(':');
        var key = keyValues[0].replace(/\'/g, '');
        var value = parseInt(keyValues[1], 10);

        animations[i] = {};
        animations[i][key] = value;
    }

    $.each(animations, function (i, v) {
        $div.animate(v, 1000);
    });
});

実際のデモ: http://jsfiddle.net/fewds/tZMmy/

于 2012-12-28T03:50:24.667 に答える