1

我正在寻找适应这个非常简单有效的 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 结合起来。

再次感谢！

4

1 回答 1

0

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

于 2013-01-15T14:10:48.630 回答