Tag: jquery animate

不要排队fadeTo（），fadeIn（）/ fadeOut（）

我有以下动画： $(‘#id’).animate({‘margin-top’: 100, ‘margin-left’: 100}, {queue: false, duration: 1000}); $(‘#id2’).fadeTo(1000, 1); 这似乎是排队，我怎样才能确保fadeTo（）不排队？

当我更改浏览器选项卡时，Jquery Animate停止

我的投资组合中有一个疯狂的问题： httpheric http://hericdk.com 我用jquery制作了一个简单的动画，一个太空飞船的动画，然后看起来我的作品，这个想法很好，每个人都喜欢，但问题是，由于一些奇怪的原因，当我点击查看我的项目和船开始飞，如果我更改浏览器选项卡然后返回，所有背景动画正常工作..但船的动画仍然等待动画的下一个动作，直到我返回到我的投资组合的选项卡。 我会把太空船动画的代码放在这里，大家都明白了。 $(‘#spaceship a’).click(function(){ $(‘#spaceship’).spState(2).sprite({fps: 9, no_of_frames: 12}); $(‘#space’).stop().delay(3000).animate({‘top’:’0px’},9000,’easeInOutQuad’); $(‘#spaceship’).animate({‘top’:’150px’,’left’:’55%’},3000,’easeInOutExpo’).delay(200) .animate({‘top’:’350px’,’left’:’65%’},2000,’easeInOutExpo’).delay(100) .animate({‘top’:’-400px’,’left’:’65%’},1300,’easeInBack’).delay(100) .animate({‘top’:’-400px’,’left’:’88%’},300,’easeInBack’).delay(3000) .animate({‘top’:$(window).height()-305+’px’,’left’:’88%’},4000,’easeOutQuad’,function(){ $(‘#spaceship’).spState(1).spStop(true); });// spaceship launch return false; }); //spaceship animation

jQuery Animate backgroundPosition无法正常工作

我试图动画一些div的背景位置，然后是一个回调动画，它做同样的事情。 我在这里想念的是什么？ HTML： ​ CSS： .divimg { width:250px; height:250px; margin:20px; float:left; background-size: 500px 500px; background-position: top center; background-repeat: no repeat; background-image: url(http://lorempixel.com/186/116/nature/1); }​ JavaScript的： $(function() { function animateGrid() { $(‘.divimg’).animate( {backgroundPosition:”bottom center”}, 500, function() { $(‘.divimg’).animate( {backgroundPosition:”top center”}, 500) } ); } animateGrid(); })​ http://jsfiddle.net/jc6212/WPF6H/2/

jquery .animate（）和.done（）

我试图在动画完成后启动一个函数，但我无法使它工作。 这是我的代码： var count = 3; var timer = setInterval(function () { handleTimer(count); }, 1000); function endCountdown() { $(‘.begin-btn’).html(“GO!”); } function handleTimer() { if (count === 0) { clearInterval(timer); endCountdown(); } else { $(‘.begin-btn’).html(count); count–; } } $(‘.begin-mrsuper’).delay(500).animate({ “left”: “4px” }, “slow”).promise().done(function (handleTimer) {}); 我尝试过： $(‘.begin-mrsuper’).delay(500).animate({“left”:”4px”}, “slow”).promise().done(function(){ handleTimer(); }); 但是3,2,1，GO计时器在动画结束之前就开始了，任何想法？

从右到左滚动文本效果

我试图从右到左滚动文本（实际列出元素）。 这是HTML代码 text 1 text 2 我的CSS #slider-txt { position:relative; width: 590px; } #slider-txt ul { list-style-type: none; position: absolute; margin: 0px; padding: 0px; } #slider-txt ul li { text-align: right; } 和jQuery var box = $(‘#slider-txt’); if (box.length == 0) { return; } var ul = box.find(‘ul’); var li = $(‘#slider-txt’).find(‘li’); var liWidth = […]

使用jQuery在Firefox和Internet Explorer中模糊文本呈现

不确定是什么原因造成的？ 如果我在Firefox中使用slideDown，则文本渲染会在动画完成之前切断字母的顶部。 这在IE浏览器中没问题。 如果我然后改变动画使用fadeIn，那么模糊不会发生在Firefox中，但文字在IE中非常锯齿。 从我过去在动画方面提出的另一个问题来看，这个家伙告诉我，我应该将我想要的动画包装在另一个DIV中，然后再动画。 这样可以解决由.animateDiv内容填充引起的急动。 在jQuery中是否有文本呈现技巧

为什么.anan在动画制作之前会将scrollTop跳转到0？

我在那个耐克网站上玩Parallax滚动。 所以我一直在使用scrollTop来确定用户在页面上的垂直位置，然后我一直根据对该值的更改调整元素的位置。 在这里，我舍入scrollTop值并记录它。 我稍后会显示日志。 var distance = 60*(Math.round($(window).scrollTop()/60)); console.log(distance); 然后，在单击时，我调用此函数滚动到我传递的scrollTop值。 function goTo(n){ console.log(‘begin animating’); $(‘html,body’).animate({scrollTop: n},2000); } 这是问题，在动画制作之前，滚动顶部值会跳转到0。 所以我将在页面的中间位置记录下来： begin animating 0 6240 6180 6120 // etc… 我定位东西的方式依赖于scrollTop值的准确性。 所以我的问题是： 在完成动画之前，如何让scrollTop值保持跳转到0？ 如果需要更多信息，请告诉我。 inheritance人网站的现场版本： http ： //theblueeyeguy.com/moon/Illumination/ （点击’下一步’然后’上一个’来打破它）

jQuery动画Google Map容器​​的高度

我有一个地图容器DIV。 让我们称之为#mapcontainer。 我用jQuery设置它的高度： $(“#mapcontainer”).animate({height: +=200px}, 500); 我知道如果要调整地图容器的大小，需要触发google地图以使用以下内容resize： google.maps.event.trigger(map, ‘resize’); 现在显而易见的是在animate的回调中这样做： $(“#mapcontainer”).animate({height: +=200px}, 500, “linear”, function(){ google.maps.event.trigger(map, ‘resize’); }); 但这看起来并不平滑，地图只是在动画完成后突然出现。 无论如何，地图可以在动画运行时resize，以便地图平滑过渡？

Jquery太多的递归错误

我希望有人可以帮助我。 我有这个代码： $(document).ready(function() { spectrum(); function spectrum(){ $(‘#bottom-menu ul li.colored a’).animate( { color: ‘#E7294F’ }, 16000); spectrum2(); } function spectrum2(){ $(‘#bottom-menu ul li.colored a’).animate( { color: ‘#3D423C’ }, 16000); spectrum(); } }); 它正在工作但是当我看到firebug它说有太多的递归错误。 我希望有人能告诉我原因。 谢谢！

如何在另一个完全完成后启动一个jQuery动画

我有几种情况需要为元素设置动画，比如将其移动到左侧，或者将其淡入，但只有在初始动画完成100％之后。 就像说，当我点击搜索图标时，我有一个从页面顶部滑出的搜索抽屉。 这很简单： $(‘.search-toggle’).on(‘click’, function(){ $(‘.search-drawer’).slideToggle(); // or fadeIn(), show() ect.. }); 但是，如果喜欢，我点击页面底部的搜索切换，我需要在显示搜索抽屉之前向上滚动到顶部？ 我试过这样的事情： $(‘.search-toggle’).on(‘click’, function(){ $(‘html, body’).animate({ scrollTop: 0 }, “slow”).find(‘.search-drawer’).slideToggle(); // or fadeIn(), show() ect.. }); 但这两个动画同时运行。 我尝试过使用延迟，但这似乎不起作用，当顶部链接点击而不是底部时，可能会导致明显的延迟。 也就是说，我也试图运行动画，当你点击一个元素时，我希望它像330px那样向左移动然后，当它到达那个位置后，另一个元素会滑入或者我会有第二个元素首先滑动，然后第一个元素会做一些事情。 关键是，如何在开始另一个动画之前完成动画制作。 所以对于我的第二个例子，我看到动画回调并不真正起作用。 我有另一个动画： $first.animate( { left : “-=660” }, 300, function(){ $second.animate({ left: ‘-=’+startPosition }); } } 所以在这个例子中，理论上第一个$ first会向左移动660个像素，那么$ second会向左移动X个数量吗？ 它没有，它们看起来像是同时移动。 或者更确切地说，$ second在$ first之前开始制作动画。