Tag: 动画

Firefox 7.0.1上的Jquery动画滞后: 有谁知道为什么这个非常简单的jquery动画在Chrome等浏览器中完美运行，似乎在Firefox 7.0.1中被窃听？这是动画的链接。如果你在Firefox中尝试它，你会看到动画有时冻结然后重新启动。正如您所看到的，代码非常简单，只有一个动画，没有图像和内联CSS。 HTML： JS： $(document).ready(function () { to_move=$(‘#slider’); to_move.animate({ top: “-1000px” }, 15000,’linear’); }); 谢谢你的帮助。

重置并循环jquery动画: 我正在动画一些HTML对象，看起来像雪花飘落，但在循环中遇到了一些麻烦。这是我的代码： //animation function function snowflakeAnimate(index) { //random numbers //time var nTime = randomRange(9000,35000); var randTime = Math.round(nTime); //delay var nDelay = randomRange(200,35000); var randDelay = Math.round(nDelay); $(this).delay(randDelay).animate({ marginTop: “+600px” }, randTime); }; $(“.tweet”).each(snowflakeAnimate); 因此，目前所做的只是通过将上边距增加到600来设置雪花的动画。通过生成随机数来设置延迟和动画速度。我的问题是如何将雪花重置到顶部然后再次运行动画，以便它永远不会停止下降。

jQuery中的同步动画，不使用回调？: 我不能使用回调因为我有这样的场景（伪代码）： $(‘.box’).on(‘click’, function() { $(‘.expanded-box’).animate({ // shrink it }); $(this).animate({ // grow it $(this).addClass(‘expanded-box’); }); }); 我无法将扩展动画放在expanded-box增长动画的回调中，因为它可能并不总是发生。但是我需要第二个动画才能等到上一个动画完成。我怎样才能做到这一点？

jQuery动画延迟: 如何使用jQuery延迟动画？我需要导航来扩展宽度，然后扩展高度，然后反转为反向动画。码： $(function() { $(“#nav li”).not(“#logo, #nav li ul li”).hover(function(){ $(this).animate({width:”200px”},{queue:false,duration:1000}); }, function(){ $(this).animate({width:”30px”},{queue:false,duration:1000}); }); $(“#nav li.parent”).hover(function(){ $(this).children(“ul”).animate({height:”40px”},{queue:false,duration:500}); }, function(){ $(this).children(“ul”).animate({height:”0px”},{queue:false,duration:500}); }); });

如何重启/重置Jquery动画: 如何在jquery中重置动画？例如： CSS .block { position:absolute; top: 0; left: 0; } JS： $(‘.block’).animate({ left: 50, top: 50 }); 如果我做： $(‘.block’).stop(); 动画将停止。但是我怎样才能清除这个位置，重新开始呢？从点0,0。

如何在hover事件的jQuery动画中正确使用stop（）？: 我使用下面的方法制作一些动画。但是当我快速移入和移出鼠标并将其停在div ， fadeIn()不起作用且div保持透明。 $(“.grids”).hover(function() { $(‘.gridscontrol’).stop().fadeIn(200); }, function() { $(‘.gridscontrol’).stop().fadeOut(200); });

在滚动时使用css和jQuery创建模糊效果: 当用户使用css和jquery在浏览器窗口中上下滚动时，我试图创建模糊效果。这是我的代码。 HTML CSS .out { width: 100%; height: 800px; background: url(https://placekitten.com/1200/800) no-repeat; } .this-div-kills-browsers { height: 1000px; } jQuery的 var hideThatKitty = $(‘.out’).innerHeight(); $(window).on(‘scroll’, function () { hideThatKitty = hideThatKitty/$(‘.this-div-kills-browsers’).offset().top $(‘.inner’).css(‘background’, rgba(255, 255, 255, \”0’+hideThatKitty\’)); }); 演示小提琴我想要做的是增加和减少css规则背景的alpha值：当用户向上和向下滚动时使用jquery的rgba（），因此滚动会变得模糊。还是有另一种方法吗？请帮助我实现这一目标。

使用Google Visualization动画饼图: 我正在尝试使用谷歌图表。我想要一个饼图从0％到75％的动画（见下图）。我试图通过谷歌图表实现这一目标。我正在创建两组数据，一组将以99％开始，另一组以1％开始。我想反转和动画这些。我已经通过动画实现了更改值，但无法弄清楚如何让它们进行动画制作。 google.load(‘visualization’, ‘1.0’, {‘packages’:[‘corechart’]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn(‘string’, ‘text’); data.addColumn(‘number’, ‘number’); data.addRows(2); data.setValue(0, 0, ‘Work’); data.setValue(0, 1, 1); data.setValue(1, 0, ‘Eat’); data.setValue(1, 1, 99); var options = { width:500, height:500, animation: {duration: 1000, easing: ‘out’,} }; var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’)); chart.draw(data, options); function […]

在动画制作过程中更改jQuery的动画持续时间: 是否可以在两个不同的值之间更改当前运行的jQuery动画的duration ？我试图通过直接分配来改变duration ，但没有成功： var timing = { duration: 4000 }; $(document).click(function (e) { timing.duration = 1000; }); $(‘#foo’).animate({top:200, left:200}, timing); …甚至，在step方法中更改fx.options.duration不会影响正在运行的动画： var state = false, $(document).click(function (e) { state = true; }); $(‘#foo’).animate({top:200, left:200}, { duration: 4000, step: function(now, fx){ if(state) fx.options.duration = 1000; console.log(fx.options.duration); // 1000 } }); 这是一个小提琴。有什么想法可以做到这一点？