Как сделать так, чтобы несколько вызовов jQuery animate () работали один за другим?

Question

Как сделать так, чтобы несколько вызовов jQuery animate () работали один за другим?

0

Когда я нажимаю блок "aa", одновременно отображаются оба "aa" и "bb". Вызывает ли javascript функцию animate(), не блокирующую отдельные потоки? Или эта функция вводится несколько раз с тысячами обратных вызовов, которые используют вызовы функций блокирующего типа? Как я могу заставить анимацию() работать с элементами по одному, когда это необходимо (возможно, использование таймера может быть выполнено, но я должен всегда использовать таймер?)?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
    <script>

        function growbits(i,j) {
            $(i).animate({ height: "500px" }); // looks working concurrently
            $(j).animate({ width: "500px"});   // with this one
        };

    </script>
</head>
<body>
    <p id="bb" style="background: #f00; height: 50px; width: 255px; margin: 10px;">asdasd</p>  
    <p id="aa" onclick="growbits(aa,bb);" style="background: #f00; height: 50px; width: 255px; margin: 10px;">
        gfhjjjgfhgkjfhkjtkjyhtkjyhkhfukhgkudfgk

    </p>
</body>
</html>

Ive нашел следующий код в файле min.js:

self.element.animate(
            $.extend(style, top && left ? { top: top, left: left } : {}), {
                duration: o.animateDuration,
                easing: o.animateEasing,
                step: function() {

                    var data = {
                        width: parseInt(self.element.css('width'), 10),
                        height: parseInt(self.element.css('height'), 10),
                        top: parseInt(self.element.css('top'), 10),
                        left: parseInt(self.element.css('left'), 10)
                    };

                    if (pr && pr.length) $(pr[0]).css({ width: data.width, height: data.height });

                    // propagating resize, and updating values for each animation step
                    self._updateCache(data);
                    self._propagate("resize", event);

                }
            }
        );

huseyin tugrul buyukisik 23 фев. 2014, в 16:43

Источник

0

Зависит от движка JavaScript…
e-sushi 23 фев. 2014, в 15:25
1

В JavaScript нет встроенной функции animate . Вы можете видеть, что это метод объекта jQuery. Проверьте исходный код jQuery.
Quentin 23 фев. 2014, в 15:25
0

Хорошо, я посмотрю в источник.
huseyin tugrul buyukisik 23 фев. 2014, в 15:26
0

у вас есть дополнительный ;
Roko C. Buljan 23 фев. 2014, в 15:30
0

Делает ';' имеется ввиду параллельное выполнение?
huseyin tugrul buyukisik 23 фев. 2014, в 15:30

Показать ещё 3 комментария

Теги:

javascript

jquery

animation

jquery-animate

2 ответа

1

Ответ Квентина работает, но в эти дни я бы предположил, что он может быть более чистым, используя версию опций:

.animate( properties, options )

Как таковой:

javascript function growbits(i,j) { $(i).animate({ height: "500px" }, { duration: 400, done: function() { $(j).animate({ width: "500px"}); } }); };

(done может быть заменено на (старая опция) complete или always, always, done, и fail - это популярные в настоящее время события Promise)

EDIT: Чтобы уточнить, причина, по которой я предлагаю это, втрое:

1) Вам не нужно предоставлять атрибуты, которые не имеют для вас значения (в этом случае, ослабление),

2) Если вы решите, что другие атрибуты имеют значение, они часто тривиальны, чтобы добавить,

3) (Самое главное), когда вы редактируете код позже, вы точно поймете, в чем состоит вложенная функция, не задумываясь об этом.

DRobinson 23 фев. 2014, в 14:25

0

Большое спасибо.
huseyin tugrul buyukisik 23 фев. 2014, в 15:38

Ещё вопросы

В JavaScript нет встроенной функции animate . Вы можете видеть, что это метод объекта jQuery. Проверьте исходный код jQuery.
Делает ';' имеется ввиду параллельное выполнение?

Quentin · Accepted Answer · 2014-02-23T12-45-00.000Z

Из документации jQuery:

.animate( properties [, duration ] [, easing ] [, complete ] )
полный
Тип: Функция()
Функция для вызова после завершения анимации.

Так:

function growbits(i,j) {
    $(i).animate({ height: "500px" }, {}, 400, function () {
        $(j).animate({ width: "500px"});
    });

};