jQuery .fadeTo添加元素
jQuery .fadeTo添加元素
提问于 2013-02-08 12:41:07
我正试着在我的作品中的一个小div对象上添加一个小的.fadeTo效果，但我不确定我是否可以以及在哪里添加它。我想把这个效果添加到所有的div中。我想让它变成.fadeTo (500)
这是指向我的jsfiddle的链接
$(document).ready(function() {
$('div').bind("mouseenter", function(){
var color = $(this).css("background-color");
$(this).css("background", "#53b9ab");
$(this).bind("mouseleave", function(){
$(this).css("background", color);
})
})
})我正在寻找的效果将用于社交媒体图标，我想要的确切效果可以在这些社交媒体图标http://www.coletownsend.com上找到
回答 3
Stack Overflow用户
发布于 2013-02-08 13:09:56
您可以使用.animate jQuery函数。
描述:执行一组CSS属性的自定义动画。
参见this exapmle。
我已经编辑了你的代码。查看结果here，并检查HTML和Javascript代码。
这是jQuery代码：
var color;
var fadeTime = 200;
$('div').bind("mouseenter", function(){
color = $(this).css("background-color");
$(this).animate({backgroundColor: "#53b9ab"}, fadeTime);
});
$("div").bind("mouseleave", function(){
$(this).animate({backgroundColor: color}, fadeTime);
});Stack Overflow用户
发布于 2013-02-08 13:09:07
如果我理解正确的话，您需要将其应用于悬停函数，
$("div").hover(function(){
$("div").css("background-color", "orange").fadeIn("slow");
}, function() {
$("div").css("background-color", "lime").fadeOut("slow");
});根据您的代码，您可以像下面这样进行调整。
$(document).ready(function() {
$('div').bind("mouseenter", function(){
var color = $(this).css("background-color");
$(this).css("background", "#53b9ab").fadeIn('slow', 0.7);
$(this).bind("mouseleave", function(){
$(this).css("background", color).fadeTo('slow', 0.5); // partial fading
});
});
});Stack Overflow用户
发布于 2013-02-08 13:34:23
通过将这两行代码添加到您现有的代码中，如果我正确地理解了您想要的内容，您就可以实现它。
$(document).ready(function() {
$('div').bind("mouseenter", function(){
var color = $(this).css("background-color");
$(this).css("background", "red");
$(this).css("opacity", 0);
$(this).fadeTo(500,1);
})
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14765796
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号