使用颜色插件在悬停时为背景颜色设置动画.
$(function() {
$('.listing-2 li a').mouseover(function() {
$(this).animate({
backgroundColor: "#0e7796"
}, 'fast');
});
$('.listing-2 li a').mouseout(function() {
$(this).animate({
backgroundColor: "#d6f2c5"
}, 'fast');
});
});
Run Code Online (Sandbox Code Playgroud)
如何为边框颜色做同样的事情?
我想使用jQuery fadeIn和fadeout 背景颜色,我尝试下面的代码,它影响完整的div内容,我需要为背景颜色添加闪光效果.
$('.countbox').css("background-color","#FF0000").fadeIn("fast").delay(800)
.fadeout("fast");
<div class="countbox">checkout</div>
Run Code Online (Sandbox Code Playgroud)
我也试过这个,但它不起作用!
$('.countbox').css("background-color","#FF0000").fadeIn("fast").delay(800).css("background-color","#FFFFFF");
Run Code Online (Sandbox Code Playgroud)
有什么问题可以帮助我!
编辑
哎呀!我的答案不适用于所有窗口.哪一个只为当前窗口提供闪光效果,但我需要获得所有窗口的闪光效果.例如: - 当我点击按钮时,它应该为我提供所有窗口的div的闪光效果,就像在这个网站上一样.
我想将"exampleDiv"的背景颜色从原始白色背景更改为当我调用下面的代码时立即更改背景黄色然后淡出回原始白色背景.
$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast");
Run Code Online (Sandbox Code Playgroud)
但是,此代码不起作用.
我只有JQuery核心和JQuery UI链接到我的网页.
为什么上面的代码不起作用?
我有一个<td>.它有一个应用的类,它指定了一个背景颜色.我可以淡入不同的类,它只有不同的背景颜色吗?就像是:
// css
.class1 {
background-color: red;
}
.class2 {
background-color: green;
}
$('#mytd').addClass('green'); // <- animate this?
Run Code Online (Sandbox Code Playgroud)
谢谢
使用jquery是否可以当用户向下滚动页面时背景的动画从50%白色变为90%白色或某些?
首先它是颜色rgba(255,255,255,.5),当用户在颜色下方滚动210px时become rgba(255,255,255,.9).
希望有人可以给我一些指示.我试图在单击按钮后向div添加"脉动"效果.
我写的以下脚本很好并且确实有效 - 但是我理想的是它喜欢在背景颜色之间交替而不是完全淡化div.
我使用了错误的效果吗?或者有没有一种方法可以结合脉冲和亮点?
$(document).ready(function() {
$("li#emailSellerLink a").click(function(){
$("#contactColumn").effect( "pulsate", {times:3}, 5000 );
});
});
Run Code Online (Sandbox Code Playgroud)
谢谢
我正在尝试通过使用JQuery更改背景颜色来创建简单的脉冲效果.但是,我无法将backgroundColor设置为动画.
function show_user(dnid) {
/* dnid is HTML ID of a div. */
if (! $(dnid).is(':visible')) {
$(dnid).show()
}
$('html, body').animate({scrollTop: $(dnid).offset().top});
$(dnid).animate({backgroundColor: "#db1a35"}, 1200);
}
Run Code Online (Sandbox Code Playgroud)
奇怪的是,这个替代动画有效:
$(dnid).animate({opacity: "toggle"}, 1200);
Run Code Online (Sandbox Code Playgroud)
但这根本不是我想要的.
此外,函数中的show()和滚动功能正常工作.这只是背景颜色动画.
上面的函数由此链接调用
<a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')">Locate Me</a>
有人可以帮助我设置背景颜色的动画吗?
=========
谢谢大家的帮助.很多类似的答案.这就是我最终的结果
在我的标题中
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
然后在我的show_user函数之后滚动动画.
var bgcol = $(dnid).css('backgroundColor');
$(dnid).animate({backgroundColor: "#db1a35"}, 2000);
$(dnid).animate({backgroundColor: bgcol}, 2000);
Run Code Online (Sandbox Code Playgroud)
这会产生一个相对快速的红色"脉冲",吸引用户的眼睛.
再一次感谢你的帮助.
我希望每次渲染时都有每个模板脉冲.有一个可视化调试工具来查看正在呈现的内容.所以我想象一下这样的东西,当一个模板(一个小片段)被渲染,它的背景颜色被设置为红色,然后这个红色慢慢变成原始背景颜色或任何背景(即使它是透明的).因此,如果我发现某些东西一直都是红色,我知道它一直在被重绘.
<div class="post_each">
<h1 class="post_title">Apartamentos 1 comodo</h1>
<img class="thumb" src="1.jpg"/>
<img class="thumb" src="1.jpg"/>
<img class="thumb" src="1.jpg"/>
<img class="thumb last" src="1.jpg"/>
</div>
<div class="post_each">
<h1 class="post_title">Apartamentos 2 comodo</h1>
<img class="thumb" src="1.jpg"/>
<img class="thumb" src="1.jpg"/>
<img class="thumb" src="1.jpg"/>
<img class="thumb last" src="1.jpg"/>
</div>
<script type="text/javascript">
$('img.thumb').hover(function {
$(this).animate({"background" : "white"}, 600);
});
</script>
Run Code Online (Sandbox Code Playgroud)
hover()根本不起作用.我只是尝试设置鼠标悬停时应增加背景颜色或边框大小.
出于某种原因,我只是无法将悬停效果用于
HTML:
<div id="navbarcontainer">
<ul>
<li id="left" class="current">
<a id="current">Home</a></li>
<li class="dependant1">
<a id="dependant1">Services</a></li>
<li id="right" class="dependant2">
<a id="dependant2">Contact</a></li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
#navbarcontainer {
margin: 0;
padding: 0;
height: 50px;
background: #01216D;
}
#navbarcontainer ul {
clear: both;
margin: 0;
padding: 0;
list-style: none;
}
#navbarcontainer li {
display: inline-block;
height: 50px;
width: 100px;
list-style: none;
text-align: center;
-moz-transition: .5s;
-o-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
/* Firefox 4 */
/* Opera */
/* Safari and Chrome */
}
#navbarcontainer …Run Code Online (Sandbox Code Playgroud)