Tag: jquery animate

jQuery：为输入字段设置动画文本颜色？: 我有这个非常简单的代码片段，我认为这是让jQuery为给定输入字段设置文本颜色动画的正确方法。 $(‘input’).animate({color: ‘#f00’}, 500); 但它不会起作用。但是，我可以更改文字颜色： $(‘input’).css(‘color’, ‘#f00’); 我在Safari 4和Firefox 3.5中都尝试过相同（缺乏）的结果。我真的很感激这个问题的任何输入，因为我的头发已经用完了…谢谢。

停止特定的jQuery动画: 我在一个对象上有多个动画，我需要停止一个特定的动画而不是所有动画。它看起来不像.stop（）方法可以做到这一点。例如，在同时为不透明度和宽度设置动画时，我可能需要取消不透明度动画，同时仍然完成宽度动画。看起来这是不可能的，但我希望有人知道我缺少的技巧或API调用。注意：我不是在谈论排队的动画，我希望同时为多个属性设置动画，并且能够在它们已经开始之后停止一些属性动画

jquery为旋转div设置动画: 我想在动画函数中旋转div，例如 $(‘div’).animate({rotate: ’30deg’},1000); 我发现了这个： http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html 但我想知道是否有更正式的方式来做或至少以不同的方式。谢谢

想要在旋转时显示元素的厚度: 我正在通过CSS将硬币沿Y轴旋转90度。有没有办法让我可以在旋转之后显示硬币的厚度，我想我可以在硬币沿Y轴旋转后缩放，但这似乎不起作用。如果可能，请建议一些方法来做同样的事情。 link_on_js也是如此。请使用webkit浏览器打开链接。 CSS .coin { display: block; background: url(“url-to-image-of-coin.jpg”); background-size: 100% 100%; width: 100px; height: 100px; margin: auto; border-radius: 100%; transition: all 500ms linear; } .flip { transform: rotateY(180deg); } HTML jQuery的 $(‘.coin’).click(function() { $(this).toggleClass(‘flip’); }); 小提琴 http://jsfiddle.net/7EtLu/22/

平滑图像淡出，更改src，并使用jquery淡入: 我正在尝试执行以下操作：在链接点击： 1.）淡出img 2.）更改现在隐藏图像的src 3.）当新的src的img完成加载时，淡入最低限度，我希望看到一个图像的平滑淡出和另一个图像的淡入淡出（通过更改src在相同的img标记内）最终我想： 1.）淡出img 2.）显示动画gif“加载图像” 3.）更改现在隐藏图像的src 4.）隐藏GIF动画“加载图片” 5.）当带有新src的img完成加载时，淡入谢谢。这是我到目前为止所尝试的。似乎只有在src改变之后（在淡出之前）闪烁几次。奇怪的行为。 $(“#Image”).fadeOut(); $(“#Image”).attr(“src”, NEW_IMAGE_SRC); $(“#Image”).fadeIn(); #Image是一个IMG标签

jQuery跨浏览器“滚动到顶部”，带有动画: 现在我正在使用这个： $(‘#go-to-top’).each(function(){ $(this).click(function(){ $(‘html’).animate({ scrollTop: 0 }, ‘slow’); return true; }); }); 这在Chrome中不起作用，在Opera中我得到一个小闪烁：浏览器立即滚动到顶部，然后回到底部，然后它开始慢慢地滚动到顶部，就像它应该的那样。有一个更好的方法吗？

如何在没有堆叠回调的情况下在jQuery中制作动画？: 假设我有三个div，并且我希望每个div都完成前一个动画。目前，我写这个： $(‘div1’).fadeOut(‘slow’, function() { $(‘div2’).fadeOut(‘slow’, function() { $(‘div3’).fadeOut(‘slow’); }); }); 这是丑陋的，但可管理。现在想象一下，我有10种不同的动画需要在不同的元素上一个接一个地发生。突然间，代码变得如此笨重，以至于管理起来非常困难…… 这是我想要做的伪代码： $(‘div1’).fadeOut(‘slow’ { delay_next_function_until_done: true } ); $(‘div2’).fadeOut(‘slow’ { delay_next_function_until_done: true } ); $(‘div3’).animate({ top: 500 }, 1000 ); 我该如何实现这一目标？

jQuery动画序列: 我的问题已被问过一百万次，但我找不到满足我需求的答案。我需要的是一个允许我按顺序播放动画的function。我正在开发一个包含许多CSS3过渡和jQuery / jQueryUI动画的网站。我将这些动画分解为基本的独立function，例如： slideUpSomething（）; fadeOutSomethingElse（）; showThisOtherDude（）; 这些function可以是任何东西： animationA（）; animationB（）; animationC（）; 使用回调或队列会使代码无法管理。说实话，我现在还不够好控制它们（计划稍后学习）……链接似乎不可能，因为我以不同的方式动画不同的元素。使用计时器对我来说似乎很糟糕。我梦寐以求的是一个function“animateSequentially（sequence）”，其工作原理如下： $(document).ready(function(){ function animationA() {/*declaration*/} function animationB() {/*declaration*/} function animationC() {/*declaration*/} … function animationZ() {/*declaration*/} function animateSequentially(sequence) { /* Here is the code I need */ } $(‘#someButton’).click(function(){ animateSequentially( [animationA, animationB, animationC, … , animationZ] ); }); }); 要求如下： […]

jquery animate .css: 我有一个脚本： $(‘#hfont1’).hover( function() { $(this).css({“color”:”#efbe5c”,”font-size”:”52pt”}); //mouseover }, function() { $(this).css({“color”:”#e8a010″,”font-size”:”48pt”}); // mouseout } ); 我怎么能动画它或减慢它，所以它不会是瞬间的？

jQuery delay（） – 如何阻止它？: 我已经尝试过stop（true，true），stop（true）和clearQueue（）; 但这不起作用。我有快速更换幻灯片的问题，我已经有一些function必须重置一切，但它不起作用。 function reset(){ $(‘div’).clearQueue(); $(‘#img’).html(”).css({‘left’:0,’right’:0,’opacity’:1,’z-index’:1}); $(‘#img2’).html(”).css({‘left’:0,’right’:0,’opacity’:1,’z-index’:1}); $(‘#place’).html(”);$(‘#place’).html(”); } 但我认为这不会停止（或删除）动画上的delay（）函数。所以我不知道我是否不必使用setTimeout函数。这是一块动画脚本： reset(); actual_slide=2; $(‘#img’).html(”).css({‘opacity’:0,’z-index’:2}).delay(time_delay/5).fadeTo(time_fast,1).delay(time_delay*2).fadeTo(time_fast,0); $(‘#img2’).html(”).css({‘opacity’:’0′,’top’:0}).fadeTo(time_fast,1).animate({‘top’:’-495′},time_delay*3,function(){ if(actual_slide==2){$(‘#img2’).css({‘top’:0}).fadeTo(time_fast*2,0).html(”);}else{reset();} if(actual_slide==2){$(‘#img’).html(”).fadeTo(time_fast*2,’1′).css({‘left’:-300,’top’:-700}).animate({‘left’:-900,’top’:-700},time_delay*2);}else{reset();} if(actual_slide==2){$(‘#1’).css({‘width’:1365,’height’:1200}).animate({‘width’:1665,’height’:1400},time_delay*2);}else{reset();} }); 那个actual_slide必须在重复那个函数之前保护它，但这也不行。问题是当我快速更改幻灯片时，因为重置不会阻止所有内容，并且它开始做我不想要的事情在（比如将照片改为其他和其他）。