jQuery - 如何从一种颜色淡入/淡出到另一种颜色？（可能是 jQuery 的第 3 方插件吗？）

发布于 2024-12-18 15:13:58 字数 316 浏览 3 评论 0原文

我正在寻找一个 jQuery 脚本或第三方 jQuery 插件，它可以根据“从颜色”和“到颜色”创建淡入/淡出效果。我如何看待它的例子：

$( selector ).fadeColor({
    from: "#900", // maroon-red color
    to: "#f00",   // blood-red color
}, 3000); // last argument is the time interval, in milliseconds in this particular case it's based for 3 seconds

原文

I'm looking for a jQuery script or a 3rd party plugin for jQuery, which can create a fade in/out effect based on "from color" and "to color". Example how I see it:

$( selector ).fadeColor({
    from: "#900", // maroon-red color
    to: "#f00",   // blood-red color
}, 3000); // last argument is the time interval, in milliseconds in this particular case it's based for 3 seconds

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

神爱温柔 2024-12-25 15:13:58

jQuery UI 扩展了 jQuery 的 animate 方法来包含彩色动画。然后您可以执行以下操作：

$("#someId").animate({backgroundColor: "#ff0000" });

这是一个工作示例。

jQuery UI extends jQuery's animate method to include colour animation. You can then do something like:

$("#someId").animate({backgroundColor: "#ff0000" });

Here's a working example.

回复收藏 0 原文

━╋う一瞬間旳綻放 2024-12-25 15:13:58

您不需要其他插件。示例：

jQuery

$(selector).css("color", "blue");

CSS

selector {
  transition: color .3s;
}

这将工作得很好（并且不会减慢网站速度）。

You don't need another plugin. Example:

jQuery

$(selector).css("color", "blue");

CSS

selector {
  transition: color .3s;
}

This will work just fine (and without slowing down the website).

回复收藏 0 原文

乙白 2024-12-25 15:13:58

jQuery UI 动画函数可以做到这一点。

请参阅此处了解 jsFiddle。

回复收藏 0 原文

无法回应 2024-12-25 15:13:58

这是我的 2 美分价值 - 一个 jsFiddle 的连续脉动按钮，在文档加载时触发。

此处演示

function fadeDivIn(){
    $("#div").animate({backgroundColor: "#ed3" }, 4000, function(){fadeDivOut();});
}

function fadeDivOut(){
    $("#div").animate({backgroundColor: "#3de" }, 4000, function(){fadeDivIn();});
}

$(document).ready(function(){
    fadeDivIn();
});

Here's my 2 cents worth - a jsFiddle of a continuously pulsating button, triggered when the document loads.

Demo here

function fadeDivIn(){
    $("#div").animate({backgroundColor: "#ed3" }, 4000, function(){fadeDivOut();});
}

function fadeDivOut(){
    $("#div").animate({backgroundColor: "#3de" }, 4000, function(){fadeDivIn();});
}

$(document).ready(function(){
    fadeDivIn();
});

回复收藏 0 原文

~没有更多了~