我是全新的jQuery和有一些使用原型的经验。在Prototype中,有一个方法来“闪现”一个元素。简单地用另一种颜色突出它,然后让它变回正常,这样用户的眼睛就会被吸引到它上面。jQuery中有这样的方法吗?我看到淡出,淡出,和动画,但我没有看到任何像“闪光”。也许这三个中的一个可以与适当的输入一起使用?


当前回答

最简单的方法是这样做:

<script>

setInterval(function(){

    $(".flash-it").toggleClass("hide");

},700)
</script>

其他回答

一个简单的答案如何?

美元(’selector’)fadeTo(’fast’,0)fadeTo(’fast’,1)fadeTo(’fast’,0). fadeTo(’fast’)(1)

闪烁两次……这就是所有的朋友们!

把上面所有的这些放在一起——一个简单的闪光元素的解决方案,并返回到原始的bgcolour…

$.fn.flash = function (highlightColor, duration, iterations) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css('backgroundColor');
    var flashString = 'this';
    for (var i = 0; i < iterations; i++) {
        flashString = flashString + '.animate({ backgroundColor: highlightBg }, animateMs).animate({ backgroundColor: originalBg }, animateMs)';
    }
    eval(flashString);
}

像这样使用:

$('<some element>').flash('#ffffc0', 1000, 3);

希望这能有所帮助!

你可以进一步扩展Desheng Li的方法,允许迭代计数进行多次闪光,如下所示:

// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = Math.floor(duration / iterations);

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
    return this;
}

然后你可以调用方法的时间和闪光的数量:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second

纯jQuery解决方案。

(不需要jquery-ui/animate/color)

如果你想要的是黄色的“闪光”效果,而不加载jquery颜色:

var flash = function(elements) {
  var opacity = 100;
  var color = "255, 255, 20" // has to be in this format since we use rgba
  var interval = setInterval(function() {
    opacity -= 3;
    if (opacity <= 0) clearInterval(interval);
    $(elements).css({background: "rgba("+color+", "+opacity/100+")"});
  }, 30)
};

上面的脚本简单地做了1s黄色淡出,非常适合让用户知道元素被更新或类似的事情。

用法:

flash($('#your-element'))

这个函数使它闪烁。 它必须使用cssHooks,因为rgb默认返回background-color函数。

希望能有所帮助!

$.cssHooks.backgroundColor = {
get: function(elem) {
    if (elem.currentStyle)
        var bg = elem.currentStyle["backgroundColor"];
    else if (window.getComputedStyle)
        var bg = document.defaultView.getComputedStyle(elem,
            null).getPropertyValue("background-color");
    if (bg.search("rgb") == -1)
        return bg;
    else {
        bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        function hex(x) {
            return ("0" + parseInt(x).toString(16)).slice(-2);
        }
        return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
    }
}
}
function blink(element,blinkTimes,color,originalColor){
    var changeToColor;
    if(blinkTimes === null || blinkTimes === undefined)
        blinkTimes = 1;
    if(!originalColor || originalColor === null || originalColor === undefined)
        originalColor = $(element).css("backgroundColor");
    if(!color || color === null || color === undefined)
        color = "#ffffdf";
    if($(element).css("backgroundColor") == color){
        changeToColor = originalColor;
    }else{
        changeToColor = color;
        --blinkTimes;
    }
    if(blinkTimes >= 0){
        $(element).animate({
            "background-color": changeToColor,
        }, {
            duration: 500,
            complete: function() {
                blink(element, blinkTimes, color, originalColor);
                return true;
            }
        });
    }else{
        $(element).removeAttr("style");
    }
    return true;
}