我正在寻找适应这个非常简单有效的jQuery脚本：
jQuery to animate image from left to right?（感谢DonamiteIsTnt）...
我想知道如何扩展它，以便可以有效地使用带有“切换”动画的两个图像。例如，一只鸟飞向屏幕右侧-翻转动画-鸟似乎飞回左侧-翻转动画-再次飞向右侧。
我一直在思考“切换”动画，该动画沿着2D图像的线条有效地转向自身（例如一条金鱼在碗里来回游动，以及它如何从玻璃杯前出现）。
我不知道在这种情况下是否要使用单个图像并将其从30px宽缩小到0px，然后缩小到-30px等，以另一种方式面对它。或需要在朝右的图像和朝左的图像之间切换。无论哪种方式，将其动画化都是很酷的。
我在此站点上发现了类似的问题，这些问题涉及左右效果和翻转效果，但没有结合在一起。因此，任何帮助将不胜感激！
附带说明：我已链接到http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
编辑：到此为止...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function beeRight() {
$("#b").animate({left: "+=300"}, 5000, "swing", beeLeft);
$("#img").attr("src","rightArrow.gif");
}
function beeLeft() {
$("#b").animate({left: "-=300"}, 5000, "swing", beeRight);
$("#img").attr("src","leftArrow.gif");
}
beeRight();
});
</script>
</head>
<body>
<div id="b" style="position:absolute;"><img id="img" src="rightArrow.gif"></div>
</body>
然后，我将如何添加动画图像交换，例如：http://davidwalsh.name/demo/css-flip.php-不用说，不需要那么复杂。我想用img而不是div来做到这一点。我了解如何在CSS中完成此类操作，但不知道如何将其与jQuery / Javascript合并。
再次感谢！
最佳答案
根据您所针对的浏览器，您可以完全在CSS3中实现效果。使用几个类来表示开始和结束状态，并使用一些translatex transforms和scalex transforms来处理翻转。然后添加CSS transition属性进行动画处理。然后，您可以使用任何想要触发类更改的内容，:hover，jQuery计时器，元素单击等。