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

Question

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

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

一些信息将不胜感激。

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 以便对其进行控制。我添加了“光标：指针”，以便访问者知道它是“可点击的”。

<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 上测试它。完美运行。