Question

我正在寻找适应这个非常简单有效的jQuery脚本： jQuery to animate image from left to right?（感谢DonamiteIsTnt）......

我想知道如何扩展它，这样你就可以有效地使用两个图像和一个＆＃34;开关＆＃34;动画。例如，一只鸟飞到屏幕右侧 - 翻转动画 - 鸟似乎向左飞 - 翻转动画 - 再次飞向右边。

＆＃34;开关＆＃34;动画我正在思考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结合使用。

再次感谢！

Answer 1

根据您定位的浏览器，您可以完全在CSS3中实现效果。使用几个类来表示开始和结束状态，使用一些translatex transforms和scalex transforms来处理翻转。然后将CSS transition属性添加到动画。然后你可以使用你喜欢的任何东西来触发类更改，:hover，jQuery计时器，元素点击，等等。

jQuery动画图像：左右翻转/旋转效果

1 个答案: