是否可以重新启动用作背景图像的动画GIF？
考虑这个HTML：
@H_404_4@<div id="face"> <div id="eyes"></eyes> </div>而这种风格：
@H_404_4@#eyes.blink { background-image:url('blink.gif'); }我想要blink.gif动画播放每次我添加类闪烁#eyes，而不仅仅是第一次。
我期望这样工作：
@H_404_4@function startBlink() { $('#eyes').addClass('blink'); } function stopBlink() { $('#eyes').removeClass('blink'); }解决方法
您可以通过重新加载动画gif来重播。这不是理想的带宽，特别是如果您的图像很大，但会强制重新启动动画。
在我的例子中，我将添加并删除它< div id =“animated”> ;:
@H_404_4@$('#animated').click(function() { /* Reference to the clicked element and toggle the .go class */ var $div = $(this); $div.toggleClass('go'); /* Start the animated gif */ if ($div.hasClass('go')) { /* Create an <img> element and give it the animated gif as a src. To force a reload we add a date parameter to the URL */ var img = document.createElement('img'); img.src = "http://yoursite.com/animated.gif?p" + new Date().getTime(); /* Once the image has loaded,set it as the background-image */ $(img).load(function(){ $div.css({backgroundImage: "url("+img.src+")"}); }); /* Remove the background-image */ } else { $div.css({backgroundImage: "none"}); } })Demo of it在行动。
