Questions tagged «jquery-animate»

我正在尝试在鼠标悬停时使用jQuery来动画backgroundColor的变化。 我检查了一些示例，似乎正确了，它可以与其他属性（例如fontSize）一起使用，但可以使用backgroundColor以及“ Invalid Property” js错误。我正在使用的元素是一个div。 $(".usercontent").mouseover(function() { $(this).animate({ backgroundColor: "olive" }, "slow"); }); 有任何想法吗？

327 javascript  jquery  colors  jquery-animate 

我正在使用jQuery和jQuery-ui，并希望为各种对象设置各种属性的动画。 为了在此说明问题，我将其简化为一个div，当用户将鼠标悬停在该div时，该颜色从蓝色变为红色。 使用时我可以得到想要的行为animate()，但是这样做时，我要设置动画的样式必须在动画代码中，因此与样式表是分开的。（请参见示例1） 一种替代方法是使用addClass()，removeClass()但是我无法重新创建可以得到的确切行为animate()。（请参见示例2） 例子1 让我们看一下我拥有的代码animate()： $('#someDiv') .mouseover(function(){ $(this).stop().animate( {backgroundColor:'blue'}, {duration:500}); }) .mouseout(function(){ $(this).stop().animate( {backgroundColor:'red'}, {duration:500}); }); 它显示了我正在寻找的所有行为： 在红色和蓝色之间平滑地动画。 当用户将鼠标快速移入或移出div时，没有动画“超排队”。 如果用户在动画播放过程中将鼠标移入/移出，则可以正确地缓解当前的“中途”状态和新的“目标”状态。 但是，由于定义了样式更改，因此animate()我必须在此处更改样式值，而不能仅将其指向我的样式表。样式定义的这种“碎片化”确实让我感到困扰。 例子2 这是我目前使用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将临时样式添加到元素，然后递增适当的值，直到它们达到所提供类的值，然后才实际添加/删除该类。 因此，我必须删除样式属性，否则，如果动画停止一半，样式属性将保留并永久覆盖任何类值，因为标记中的样式属性比类样式具有更高的重要性。 但是，当动画完成一半时，它还没有添加新类，因此，使用此解决方案，当用户在动画完成之前移动鼠标时，颜色会跳到先前的颜色。 我理想地想要做的是这样的事情： $('#someDiv') .mouseover(function(){ …

225 javascript  jquery  css  jquery-ui  jquery-animate 

我想动画一个<div>从200px到auto的高度。我似乎无法使其工作。有人知道吗？ 这是代码： $("div:first").click(function(){ $("#first").animate({ height: "auto" }, 1000 ); });

171 javascript  jquery  html  css  jquery-animate 

单击按钮时，我将页面设置为滚动到顶部。但是首先，我使用了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(top); // the result was 365 这给了我365的结果，我想这就是我滚动到顶部之前的位置编号。 我的问题是如何将位置设置为0，以便可以添加在页面为0时运行的另一个动画？ 谢谢！

171 jquery  jquery-animate  scrolltop 

试图在页面加载时将滚动动画化为特定的ID。我做了很多研究，并发现了这一点： $("html, body").animate({ scrollTop: $('#title1').height() }, 1000); 但这似乎是从ID开始并动画到页面顶部？ HTML（位于页面的一半）很简单： <h2 id="title1">Title here</h2>

123 jquery  scroll  jquery-animate 

我正在创建跨浏览器兼容的旋转（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(); 为什么会这样，有没有办法解决？ 谢谢。

81 jquery  css  rotation  jquery-animate 

用jQuery动画box-shadow属性的正确语法是哪种？ $().animate({?:"0 0 5px #666"});

75 jquery  css  jquery-animate  box-shadow