Javascript 图像动画闪烁图像错误

Question

我有一些用于为天气雷达制作动画的 javascript，但图像在每个时间间隔内闪烁。有谁知道如何解决这一问题？这是我到目前为止的代码.. http://jsfiddle.net/5a2BZ/46/

HTML

<script src="http://code.jquery.com/jquery-1.5.2rc1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>


<div id="slider">
    <div id="bar">
    </div>
</div>

JavaScript

$('#bar').draggable({
    containment: 'parent'
});

var animate = null;
var even = true;

animate = setInterval(function () {

    if (even) {
        $("#bar").css("background-image", "url('http://static.baynews9.com/images/wx/bn9/radar/7_county/1342653720.jpg')");
        even = false;
    } else { 
        $("#bar").css("background-image", "url('http://static.baynews9.com/images/wx/bn9/radar/7_county/1342654440.jpg')");
        even = true;
    }

}, 500);



var el = document.getElementById('bar'); 
el.addEventListener("touchstart", touchHandler, true);
el.addEventListener("touchmove", touchHandler, true);
el.addEventListener("touchend", touchHandler, true);
el.addEventListener("touchcancel", touchHandler, true);

function touchHandler(event){
    var touches = event.changedTouches,
        first = touches[0],
        type = "";

    switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type="mousemove"; break;        
        case "touchend":   type="mouseup"; break;
        default: return;
    }
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                              first.screenX, first.screenY,
                              first.clientX, first.clientY, false,
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

CSS

#slider {
    width: 700px;
    border: 1px solid #000;
    height: 500px;
}

#bar {
    border: 1px solid #000;
    left:30px;
    top:30px;
    height: 355px;
    cursor: pointer;
    width: 666px;
}

Answer 1

使用与您的雷达图像匹配的静态图像作为背景。这不是最好的解决方案，但似乎对我有用。这是 CSS 和 HTML。我没有更改 javascript。

#slider {
width: 700px;
border: 1px solid #000;
height: 500px;
}

#bar {
border: 1px solid #000;
left:30px;
top:30px;
height: 355px;
cursor: pointer;
width: 666px;
}
#well{
width: 100%;
height: 100%;
z-index:-1;
position:relative;
background-image: url('http://static.baynews9.com/images/wx/bn9/radar/7_county/1342653720.jpg');
}

然后像这样将你的酒吧围起来:

<div id="slider">
    <div id="bar">
        <div id="well">
        </div>
    </div>
</div>​

这是完整的解决方案:http://jsfiddle.net/5a2BZ/70/