Как сделать 2 анимации сразу с jQuery

Question

Я работаю над веб-проектом. Я хочу нарисовать элемент div (выглядит как таблица) с анимацией: я нажимаю на кнопку, затем элемент div появляется с небольшим размером на кнопке, затем он плавает до «своего» положения, тем временем получая свой первоначальный размер. Мне удалось это сделать, но только последовательно. Сначала масштабирование, чем плавающее. Я хочу, чтобы эти анимации выполнялись одновременно.

Я использую JQuery щий шоу() функции, чтобы сделать DIV появляется и масштаб его размера происхождения, то я использую JQuery анимацию фикцию для плавания.

Я попытался использовать очередь : false. И я также назвал функцию .dequeue(), но она не работает так, как я этого хотел.

Буду признателен за любые советы. Заранее спасибо. Приветствия.

$('#matrix').animate({ 
     top: positionTop, 
     left: positionLeft, 
    }); 
    $('#matrix').show("scale", { percent: 100, direction: 'both', origin: ['top', 'left'] }, 2000); 
    $('#matrix').animate({ 
     top: positionTopAim, 
     left: positionLeftAim 
    }); 

Fiddle здесь: LINK

Answer 1

var $matrix = $('#matrix'); 
    // store original size 
    var size = { 
     width: $matrix.width(), 
     height: $matrix.height() 
    }; 
    $matrix.animate({ 
     top: positionTop, 
     left: positionLeft, 
    }); 
    // Sets the width and height to 0 
    $matrix.width(0).height(0).show(); 

    // animates into original size 
    $matrix.animate({ 
     width: size.width, 
     height: size.height 
    }, {queue: false}); 

    $matrix.animate({ 
     top: positionTopAim, 
     left: positionLeftAim 
    }, {queue: false}); 

очереди: ложные делает то набить

Вот workaround

Для дальнейшей работы с JQuery, предотвратить себя от используя тот же селектор дважды или больше, чем один раз. Это неэффективно. Существует формальная директива по хранению объекта jQuery в переменной «$ something». Для получения дополнительной информации посетите this site.

Good Luck;)