一次执行两个jquery函数

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()的两次调用合并为一个调用.

编辑:此外,如果你只是左右移动你的元素而不做任何疯狂的旋转/缩放/等等,你可以让元素的位置相对而且只是为"左"属性设置动画.