使用JQuery实现黄色淡入淡出效果

Question

我想实现类似于37Signals的黄色淡化效果.

我正在使用Jquery 1.3.2

代码

(function($) {
   $.fn.yellowFade = function() {
    return (this.css({backgroundColor: "#ffffcc"}).animate(
            {
                backgroundColor: "#ffffff"
            }, 1500));
   }
 })(jQuery);

并且下一个调用show yellow使用box id 淡化DOM元素.

$("#box").yellowFade();

但它只会使它变黄.15000毫秒后没有白色背景.

知道为什么它不起作用吗？

解

您可以使用:

$("#box").effect("highlight", {}, 1500);

但你需要包括:

effects.core.js
effects.highlight.js

Answer 1

这个函数是jQuery effects.core.js的一部分:

$("#box").effect("highlight", {}, 1500);

正如Steerpike在评论中指出的那样,需要包含effects.core.js和effects.highlight.js才能使用它.

Answer 2

jQuery特效库为您的应用添加了相当多的不必要的开销.你只能用jQuery完成同样的事情. http://jsfiddle.net/x2jrU/92/

jQuery.fn.highlight = function() {
   $(this).each(function() {
        var el = $(this);
        el.before("<div/>")
        el.prev()
            .width(el.width())
            .height(el.height())
            .css({
                "position": "absolute",
                "background-color": "#ffff99",
                "opacity": ".9"   
            })
            .fadeOut(500);
    });
}

$("#target").highlight();

Answer 3

I loved Sterling Nichols answer, since it was lightweight and didn't require a plugin. However, I discovered it didn't work with floating elements (i.e. such as when the element is "float:right"). So I re-wrote the code to display the highlight properly no matter how the element is positioned on the page:

jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("<div/>")
        .width(el.outerWidth())
        .height(el.outerHeight())
        .css({
            "position": "absolute",
            "left": el.offset().left,
            "top": el.offset().top,
            "background-color": "#ffff99",
            "opacity": ".7",
            "z-index": "9999999"
        }).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
    });
}

Optional:
Use the following code if you also want to match the border-radius of the element:

jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("<div/>")
        .width(el.outerWidth())
        .height(el.outerHeight())
        .css({
            "position": "absolute",
            "left": el.offset().left,
            "top": el.offset().top,
            "background-color": "#ffff99",
            "opacity": ".7",
            "z-index": "9999999",
            "border-top-left-radius": parseInt(el.css("borderTopLeftRadius"), 10),
            "border-top-right-radius": parseInt(el.css("borderTopRightRadius"), 10),
            "border-bottom-left-radius": parseInt(el.css("borderBottomLeftRadius"), 10),
            "border-bottom-right-radius": parseInt(el.css("borderBottomRightRadius"), 10)
        }).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
    });
}

Answer 4

(function($) {
  $.fn.yellowFade = function() {
    this.animate( { backgroundColor: "#ffffcc" }, 1 ).animate( { backgroundColor: "#ffffff" }, 1500 );
  }
})(jQuery);

应该做的伎俩.将其设置为黄色,然后将其淡化为白色

Answer 5

按如下方式定义CSS:

@-webkit-keyframes yellowfade {
    from { background: yellow; }
    to { background: transparent; }
}

@-moz-keyframes yellowfade {
    from { background: yellow; }
    to { background: transparent; }
}

.yft {
    -webkit-animation: yellowfade 1.5s;
       -moz-animation: yellowfade 1.5s;
            animation: yellowfade 1.5s;
}

只需将类添加yft到任何项目$('.some-item').addClass('yft')

演示:http://jsfiddle.net/Q8KVC/528/

Answer 6

我刚刚解决了一个与我正在进行的项目相似的问题.默认情况下,animate函数无法为颜色设置动画.尝试包含jQuery Color Animations.

这里的所有答案都使用这个插件,但没有人提到它.