用于设置图像动画的jQuery :具有翻转/旋转效果的左侧和右侧
我希望改编这个简单有效的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结合起来。
再次感谢！
回答 1
Stack Overflow用户
发布于 2013-01-15 22:10:49
根据您的目标浏览器，您可以完全在CSS3中实现此效果。使用几个类来表示开始和结束状态，并使用一些translatex transforms和scalex transforms来处理翻转。然后添加CSS transition属性来设置动画。然后你可以使用任何你喜欢的东西来触发类的改变，:hover，jQuery timer，element click，诸如此类。
https://stackoverflow.com/questions/14338026
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号