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

我想实现类似于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

1> Baldu..：

---

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

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

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

---

作为对先前注释的更新,您不再包含effects.core.js和effects.highlight.js(并且那些旧URL不再起作用).包含这个的新方法是包含jquery-ui库:http://code.jquery.com/ui/1.10.4/jquery-ui.min.js

---

嘿,正如Sergio明显发现的那样......是的Sergio,你需要包含effects.core.js文件和effects.highlight.js(请查看源代码:http://docs.jquery.com/UI/效果/高)

---

这可以在jQuery UI中找到:http://docs.jquery.com/UI/Effects/Highlight#overview

2> Sterling Nic..：

---

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

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

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

---

谢谢,这是更好的,我正在寻找一些我可以避免包括完全不必要的完整UI核心的东西.

---

更新:当尝试突出显示浮动元素时(即元素为"float:right"时),此代码通常会失败.因此,无论页面上的元素如何定位,我都会重新编写代码以正确显示高亮显示:http://stackoverflow.com/a/13106698/1145177

---

漂亮的轻量级解决方案 - 效果很好.我发现我的亮点不包括元素填充,所以我使用`.width(el.outerWidth())`和`.height(el.outerHeight())`来突出显示我的整个表单字段.

3> Doug S..：

---

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);
        $("
")
        .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);
        $("
")
        .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(); });
    });
}

---

我喜欢这个解决方案.适用于表格行.

4> 小智..：

---

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

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

---

这需要jQuery.Color()插件才能工作:https://github.com/jquery/jquery-color

5> Kamran Ahmed..：

---

按如下方式定义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/

6> Travis..：

---

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

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