同时执行两个jquery函数

我刚刚开始了解Javascript和jQuery，我正在制作一个动画

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

然而，现在我的问题是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>

jQuery（文档）.ready(
函数（）{
$（“#左箭头”）。悬停(
函数（）{
$（this.animate（{translateX:-10}）
$（this.fadeTo（'fast'，1）；
},
函数（）{
$（this.animate（{translateX:0}）；
$（this.fadeTo（'fast'，.8）；
}
)
})

---

正如我所说的，我在这方面很新，所以如果你有解决方案，请具体一点，我真的很感激

如果在对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”属性的动画。

如果您在对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（）的两个调用合并为一个调用

---

编辑：另外，如果你只是左右移动你的元素，没有做任何疯狂的旋转/缩放等，你可以不做元素的相对位置，只做“左”属性的动画。

如果出于某种原因你不想像费萨尔提到的那样将这两种效果结合起来，jQuery文档讨论的是同步动画 . 您可以在其选项数组中向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文档将在 . 您可以在其选项数组中向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});
            }
        )
    }
}

---

希望这有帮助。

谢谢，这很有魅力！左：；似乎对我所需要的很好。谢谢，这个很有魅力！左：；似乎对我所需要的很好。