Question

我目前正试图找到一种方法来显示一个简单的图像，该图像在一个恒定循环中自动淡入淡出（不透明度0> 100）。

有没有办法在jQuery中实现这一点，而不必依赖闪存解决方案？

非常感谢一些信息。

Answer 1

试试这个

$(function () {
    $('img').on("hasFadedOut", fadeInImg);
    $('img').on("hasFadedIn", fadeOutImg);
    fadeOutImg();
})

fadeInImg = function () {
    $('img').fadeIn(500, function () { $('img').trigger("hasFadedIn"); });
};

fadeOutImg = function () {
    $('img').fadeOut(2000, function () { $('img').trigger("hasFadedOut"); });
};

Answer 2

试试这个

$(document).ready(function(){

    setInterval(function(){

        $('#image').fadeIn('slow', function() {  
            $('#image').fadeOut('slow');
        });

     }, 500);

});

Answer 3

试试这个

$('#clickme').click(function() {
    $('#image').fadeIn('slow', function() {
    // After Animation complete.
    $('#image').fadeOut('slow');
    });
    });

Answer 4

让我给你我的情况。我的一个网站上有一个“团体费用计算器”。每次访客添加一些商品，且费用超过$ 0.00时，他们都可以选择“下载/打印”估算。我希望他们注意到自动显示的“打印”图标。如果费用返回$ 0.00，该图标将隐藏。我设置了一个循环，这样访客就不会感到烦恼，也因为它在测试时很烦我：)您可以为任何数字设置循环，或者删除标记的行以使其不断闪烁。有问题吗？

从您的图片开始，添加ID，以便可以对其进行控制。。我添加了“ cursor：pointer”，以便访问者知道它是“可点击的”。

<img id="est_print" src="est_print.png" style="cursor:pointer;" title="Print Estimate" alt="" />

在“ flash_icons”函数上方添加计时器变量。

var fi1; // set outside the 'flash_icons' function so other functions can stop the flashing
var fi2;

您的主要功能，我将其置于“文档就绪”功能之外。

function flash_icons() {
    $('#est_print').show();
    setTimeout(function() {
        var loop = 0; // remove to keep flashing
        $('#est_print').css('opacity', '1');
        fi1 = window.setInterval(function(){
            $("#est_print").animate({opacity: 1}, 600);
            fi2 = window.setTimeout(function(){
                $("#est_print").animate({opacity: 0.2}, 600);
                loop++; // remove to keep flashing
            }, 2000);
            if (loop == 4) { clearTimeout(fi2); clearInterval(fi1);} // remove to keep flashing
        }, 2200);
    }, 2000);
}

开始闪烁。

flash_icons();

要通过其他功能停止闪烁。

clearTimeout(fi2);
clearInterval(fi1);

我正在使用jquery-1.7.js，并在XP / Win7 / Win10和浏览器上对IE8 / FF ESR v52进行了测试。我没有在Chrome上进行测试。完美的作品。

jQuery淡入淡出图像不透明度动画

4 个答案: