Question

我刚刚使用Javascript和jQuery，我正在研究动画。

基本上，正在发生的是一个元素，＃left-arrow。在悬停时，箭头向左移动10px并增加不透明度。我正在使用jQuery的2D Transform插件来处理转换。

然而，现在我的问题是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（）的两次调用合并为一个调用。

编辑：此外，如果您只是左右移动元素而不进行任何疯狂的旋转/缩放/等等，您可以放弃使元素的位置相对而且只是制作动画'左'属性。

Answer 2

如果由于某种原因你不想像Faisal所提到的那样结合这两种效果，那么jQuery文档会讨论同时动画 http://docs.jquery.com/Release:jQuery_1.2/Effects#Simultaneous_Animations。您可以在其options数组中传递animate（）队列：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});
            }
        )
    }
}

希望这有帮助。

一次执行两个jquery函数

2 个答案: