Question

更新：现在通过使用替代方法解决了我的问题（有关详细信息，请参阅已接受的答案）。

标准wordpress安装，我有4个导航＆＃34;按钮＆＃34;沿着页面底部。每个按钮由2个由鼠标输入和鼠标移出事件触发的GIF动画组成。这个想法是让一只木偶动物在悬停时反弹，然后当你移开鼠标时再次弹回（对于一个小孩和托儿所来说）......

你可以在这里看到我在有限时间内尝试的内容：

以下是我使用的代码示例：

<div id="foo">
<a href="mysite.com"

onMouseOver="document.images['tiger'].src='http://mysite.com/early/wp-content/themes/new/images/tigerup.gif'"

onMouseOut="document.images['tiger'].src='http://mysite.com/early/wp-content/themes/new/images/tigerdown.gif'"

onFocus="if(this.blur)this.blur()">
<img src="http://mysite.com/early/wp-content/themes/new/images/tigerdown.gif" name="tiger" border="0"> </a>

虽然它确实有效，但它并不像我想的那么可靠。有时鼠标悬停事件无法触发第一个gif动画，所以任何提高效果的想法都会非常感激 - 谢谢。

Answer 1

感谢Mark Kramer提供的解决方案 - Stop a gif animation onload, on mouseover start the activation。

<script type="text/javascript">
$(document).ready(function()
{
    $("#imgAnimate1").hover(
        function()
        {
            $(this).attr("src", "/images/tigerup.gif");
        },
        function()
        {
            $(this).attr("src", "/images/tigerdown.gif");
        });
});
</script>

然后添加如下图像：

<img id="imgAnimate1" src="/images/tigerdown.gif" alt="" >

改进GIF动画的触发

1 个答案: