我希望适应这个非常简单有效的jQuery脚本:jQuery动画图像从左到右?(由于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来处理翻转。然后添加transition属性的CSS动画。然后，您可以使用任何您喜欢的触发类更改，:hover, jQuery定时器，元素点击，等等。