Выполнение двух функций jquery одновременно

Question

Я просто ориентируюсь на Javascript и jQuery и работаю над анимацией.

По сути, то, что происходит, это элемент # стрелка влево. При наведении стрелка перемещается влево на 10 пикселей и увеличивает непрозрачность. Я использую плагин 2D Transform для jQuery для обработки преобразования.

Теперь моя проблема в том, что javascript будет выполнять его только по одному за раз. Таким образом, стрелка будет двигаться, затем увеличьте непрозрачность. Эффект отчасти теряется, когда это происходит таким образом.

Можно ли как-нибудь объединить их для правильной работы?

Вот что у меня есть:

<script>
    jQuery(document).ready(
        function() {
            $('#left-arrow').hover(
                function() {
                    $(this).animate({translateX:-10})
                    $(this).fadeTo('fast', 1);

                },
                function() {
                    $(this).animate({translateX:0});
                    $(this).fadeTo('fast', .8);
                }
            )
    })
    </script>

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

Answer 1

Если вы добавите непрозрачность к своему вызову animate (), он будет анимировать это свойство одновременно с вашим свойством translateX. Например:

jQuery(document).ready(function() {
    $('#left-arrow').hover(
        function() {
            $(this).animate({translateX:-10, opacity: 1});
        },
        function() {
            $(this).animate({translateX:0, opacity: 0});
        }
    );

    $('#right-arrow').hover(
        function() {
            $(this).animate({translateX:10, opacity: 1});
        },
        function() {
            $(this).animate({translateX:0, opacity: 0});
        }
    );
});

Я также объединил два ваших вызова в document.ready () в один вызов.

РЕДАКТИРОВАТЬ: Кроме того, если вы просто перемещаете свои элементы влево и вправо и не делаете никаких сумасшедших вращений / масштабирования / и т. Д., Вы можете уйти, сделав положение элемента относительно и просто анимируя свойство left.

Answer 2

Если по какой-то причине вы не хотите объединять два эффекта, как упомянул Фейсал, в документах jQuery говорится об одновременной анимации на http://docs.jquery.com/Release:jQuery_1.2/Effects#Simultaneous_Animations. Вы можете передать animate () флаг queue: false в его массиве параметров,Итак:

jQuery(document).ready(function() {
        $("#left-arrow").hover(function() {
                $(this).animate({translateX:10}, {queue: false}).animate({opacity: 1}, {queue: false});
            }, function() {
                $(this).animate({translateX:0}, {queue: false}).animate({opacity:0}, {queue: false});
            }
        )
    }
}

Надеюсь, это поможет.