我试图在鼠标悬停时使用jQuery为backgroundColor中的更改设置动画.
我已经检查了一些例子,我似乎做对了,它适用于其他属性,如fontSize,但我使用backgroundColor和"无效属性"js错误.我正在使用的元素是div.
$(".usercontent").mouseover(function() {
$(this).animate({ backgroundColor: "olive" }, "slow");
});
有任何想法吗？
我正在使用jQuery和jQuery-ui,并希望动画各种对象的各种属性.
为了解释这里的问题,我把它简化为一个div,当用户将鼠标悬停在它上面时,它会从蓝色变为红色.
我能够在使用时获得我想要的行为animate(),但是当这样做时,我动画的样式必须在动画代码中,因此与我的样式表分开.(见例1)
另一种方法是使用addClass(),removeClass()但我无法重新创建我可以获得的确切行为animate().(见例2)
我们来看看我的代码animate():
$('#someDiv')
.mouseover(function(){
$(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
})
.mouseout(function(){
$(this).stop().animate( {backgroundColor:'red'}, {duration:500});
});
它显示我正在寻找的所有行为:
但是由于样式更改是定义的,animate()我必须更改那里的样式值,并且不能只指向我的样式表.定义样式的"碎片"真的让我困扰.
这是我目前使用的最佳尝试addClass()和removeClass(请注意,要使动画工作,您需要jQuery-ui):
//assume classes 'red' and 'blue' are defined
$('#someDiv')
.addClass('blue')
.mouseover(function(){
$(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
})
.mouseout(function(){
$(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
});
这显示了我原始要求的属性1.和2.但是3不起作用.
我明白这个的原因:
当动画addClass()和removeClass()jQuery为元素添加临时样式,然后递增适当的值,直到它们达到提供的类的值,然后才实际添加/删除类.
因此,我必须删除style属性,否则如果动画中途停止,则样式属性将保留并永久覆盖任何类值,因为标记中的样式属性比类样式具有更高的重要性.
但是,当动画完成一半时,它还没有添加新类,因此使用此解决方案,当用户在动画完成之前移动鼠标时,颜色会跳转到上一个颜色.
我理想的是能够做到这样的事情:
$('#someDiv')
.mouseover(function(){
$(this).stop().animate( getClassContent('blue'), {duration:500});
})
.mouseout(function(){
$(this).stop().animate( getClassContent('red'), …我想要动画<div>从高200px到auto高.我似乎无法让它工作.有谁知道怎么样？
这是代码:
$("div:first").click(function(){
$("#first").animate({
height: "auto"
}, 1000 );
});
单击按钮时,我将页面设置为滚动到顶部.但首先我使用if语句来查看页面顶部是否未设置为0.然后,如果它不是0,我会动画页面滚动到顶部.
var body = $("body");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop:0}, '500');
}
现在棘手的部分是在页面滚动到顶部之后动画一些东西.所以我的下一个想法是,找出页面位置是什么.所以我用console log来查找.
console.log(top); // the result was 365
这给了我一个365的结果,我猜这是我在滚动到顶部之前的位置编号.
我的问题是如何将位置设置为0,以便我可以添加另一个在页面为0时运行的动画？
谢谢!
我想在页面加载时将滚动设置为特定ID.我做了很多研究并遇到了这个问题:
$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);
但这似乎从ID和动画到页面顶部开始？
HTML(位于页面的一半)很简单:
<h2 id="title1">Title here</h2>
我正在创建一个跨浏览器兼容的旋转(ie9 +),我在jsfiddle中有以下代码
$(document).ready(function () {
DoRotate(30);
AnimateRotate(30);
});
function DoRotate(d) {
$("#MyDiv1").css({
'-moz-transform':'rotate('+d+'deg)',
'-webkit-transform':'rotate('+d+'deg)',
'-o-transform':'rotate('+d+'deg)',
'-ms-transform':'rotate('+d+'deg)',
'transform': 'rotate('+d+'deg)'
});
}
function AnimateRotate(d) {
$("#MyDiv2").animate({
'-moz-transform':'rotate('+d+'deg)',
'-webkit-transform':'rotate('+d+'deg)',
'-o-transform':'rotate('+d+'deg)',
'-ms-transform':'rotate('+d+'deg)',
'transform':'rotate('+d+'deg)'
}, 1000);
}
CSS和HTML非常简单,仅用于演示:
.SomeDiv{
width:50px;
height:50px;
margin:50px 50px;
background-color: red;}
<div id="MyDiv1" class="SomeDiv">test</div>
<div id="MyDiv2" class="SomeDiv">test</div>
使用时旋转有效,使用时.css()无效.animate(); 为什么这样,有没有办法解决它？
谢谢.
使用jQuery 为box-shadow属性设置动画的正确语法是什么？
$().animate({?:"0 0 5px #666"});
试图旋转div元素......这可能是DOM亵渎,它可能与canvas元素一起工作吗？我不确定 - 如果有人对这个如何起作用或为什么不起作用有任何想法,我很想知道.谢谢.
我似乎无法让这个工作.
$('#product_family_options_dd').animate({
height: '300px',
width: '900px',
backgroundPosition: '-20px 0px',
},
高度和宽度有活力但不是背景.
使用jQuery我正在创建一个基本的"工具提示"动画,以便工具提示将出现在一个小动画中,在该动画中它会淡入视图并垂直移动.
到目前为止我有这个:
$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');
这样做或这样做:
$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');
动画将一次运行一个,首先是淡入淡出,然后是垂直动画.有没有办法让它同时做到这两件事？