Question

非常基本的问题。我有一个非常简单的网页设计，利用透明度的png，覆盖另一个基本图像。这里的想法是它可以连续循环显示，快速淡入，显示较长的间隔，快速淡出，并在相同的较长间隔内保持不可见，基本上从当天后面复制动画GIF的行为。 png以display设置为none开始。

我的问题是jQuery似乎没有“暂停”或“延迟”事件处理程序来帮助这里。有很多插件填补了这个空白，但如果有一种我想念的简单方法，我宁愿不包括一个插件。这可能需要回退到setInterval或setTimeOut，但我不确定这样做的语法。

我想要的是：

--loop start--

$("#pngOverlay").fadeIn(1000);

(5000 delay)  // using setTimeout or setInterval if jQuery method unavailable

$("#pngOverlay").fadeOut(1000);

(5000 delay)

--loop repeat--

以下是一次性行为，所以我想如果这可能被包裹在循环中它可能会起作用，但它不会让我感觉优雅或正确。

    setTimeout(function() {
        $("#pngOverlay").fadeIn(1000);
    }, 5000);

    setTimeout(function() {
        $("#pngOverlay").fadeOut(1000);
    }, 10000);

感谢您的任何建议。我只想使用GIF，但需要透明度。（在过去，我们使用动画GIF，我们喜欢他们......）

Answer 1

<script language="JavaScript" type="text/javascript">
function showimage(){
     $("#pngOverlay").fadeIn(1000);
    setTimeout('hideimage()',5000);
}

function hideimage(){
      $("#pngOverlay").fadeOut(1000);
    setTimeout('showimage()',5000);

}
$(document).ready(function() {
    showimage();
});
</script>

Answer 2

如何使用animated PNG？

Answer 3

这样的东西？

setInterval(function()
{
    var elm = $('#pngOverlay');
    if (elm.is(':hidden'))
        elm.fadeIn(1000);
    else
        elm.fadeOut(1000);
}, 5000);

Answer 4

我看到的一个技巧是让jQuery执行5000毫秒的动画，但没有明显的效果。

  $("#pngOverlay").animate({opacity:1}, 5000);

如果项目的不透明度为1，那么它没有可见效果，但会暂停5秒。

使用jQuery交替png转换

4 个答案: