Tag: jquery animate

在菜单上单击 – >动画并动态滚动到该元素

我有一个导航菜单：简介，大小，播放，食物。 当用户单击菜单项的超链接时，我想导航到该元素并设置动画。 例如，如果用户单击“ 大小”菜单项，则我想要动画并向下滚动到id=”Size” 。 注意： 此处大小菜单项href没有任何值，因为它是动态的。 的index.html Intro Size Play Food Size Hegyét bár érti szeret.

jQuery – 动画时调用函数

是否可以在.animate事件中调用某些函数？ 我必须为某些div上的每个resize事件调用resize()函数。 举个例子，我在window resize事件上调用函数： $(window).resize(resize); 但现在我希望在animate事件中调用此函数（每个更改的像素（如.resize ））。 selector[‘el’][‘box’].animate({width:selector[‘el’][‘box’].width() – 250}, 500); selector[‘el’][‘box’].promise().done(function() {resize();}); 但这不是我想要的，因为我希望一直调用resize函数，不仅仅是在最后……

jQuery Animate Stepfunction

我遇到了step函数的一个问题。 我必须在STEP函数中调用一个复杂的函数，但我试图限制调用次数以提高性能。 为了使事情更复杂，我正在制作2个属性的动画。 obj.animate({‘width’:newWidth+px,’height’:newHeight+px}, {duration:time,queue:false,step:function(now,fx){ complicatedFunction(); }}); 该函数考虑OBJ的位置/尺寸，然后计算大约10个其他元素的新尺寸和位置，因此间隔必须相当流畅（可能每隔3或4次迭代？）什么是限制的最佳方法复杂function被调用的次数？ 谢谢 ：）

jQuery动画背景颜色不动画

http://jsfiddle.net/leonwho/98mD2/ HTML 1 Sync! CSS #account-setup-guide { position: relative; margin: 30px 30px 20px 20px; padding: 20px; width: auto; border: 5px solid orange; background: orange; } jQuery的 var animateThis = function() { console.log(‘run animateThis’); $(‘#account-setup-guide’).stop().animate({backgroundColor: ‘#ffffff’}, 500); $(‘#account-setup-guide’).animate({ background: ‘white’ }, 500); } animateThis(); 不知道为什么这不起作用，我已经使用了.animate上面的两个例子但是它在我当前的jsfiddle测试中不起作用:(

使用jQuery动画将文本插入Div

是否可以使用jQuery来使用animate ，以平滑的方式填充内容div，即在插入内容时使div的高度变得更大？ 例如（HTML）： 然后（JavaScript）： $(“#my-div”).html(“some new really long string of text which makes the div height increase.”); 我想动画html的插入，从而增加高度。

当鼠标hover在另一个上时，动画一个Div

当鼠标hover在页面上其他地方的另一个div标签时，我正在寻找动画一个div。 举个例子… CSS #blue-box { position:absolute; margin-left:50px; margin-top:50px; height:100px; width:100px; background-color:blue; } #red-box { position:absolute; margin-left:180px; margin-top:50px; height:100px; width:100px; background-color:red; } HTML JavaScript的 $(document).ready(function(){ $(‘#red-box’).animate({‘margin-top’: ‘200px’}, 1500); }); 我也帮助了一个jsFiddle 。 只要鼠标hover在蓝框上，我怎么能在红框上触发动画？ 当鼠标移离蓝框时，反转动画？ 将红色框返回到它的起始位置。 谁能帮助我？

如何在jQuery中创建链式延迟动画序列？

考虑具有以下对象： This is div1 This is div2 This is div3 This is div4 Start animation 并且考虑到我想使用jQuery在前面列出的四个元素中的每一个上应用动画。 我现在有什么 如果页面如下，请考虑头部中应用的以下代码： function start_anim() { $(“#d1″).animate({top:”-50px”},1000,function(){}); // Animating div1 $(“#d2″).animate({top:”-50px”},1000,function(){}); // Animating div2 $(“#d3″).animate({top:”-50px”},1000,function(){}); // Animating div3 $(“#d4″).animate({top:”-50px”},1000,function(){}); // Animating div4 } $(document).ready($(‘#clickhere’).click(start_anim)); 当触发事件click时，此脚本片段将导致四个div的同步转换。 我想拥有什么 但是我想先让第一个div移动，然后当第一个div的动画达到50％时，我希望第二个div移动。 第三个和最后一个div相同。 我怎么能达到这个目的？ 谢谢

jQuery动画：fadeIn（）隐藏div，不显示内容

我有一个id为“start_game”的按钮，它有一个附加的点击function和一个淡出按钮的回调，然后淡入当前由css设置的div显示：none。 当我单击按钮时，我看到包含所有这些内容的外部容器div扩展，就好像为要显示的div腾出空间，但是我从来没有看到里面的内容。 这是当前的代码： $(“#start_game”).click(function () { $(this).fadeOut(); $(“.input-append”).fadeIn(); }); 和HTML Shall we? Play! How many players? Go! 这里是唯一的自定义css，另一个css文件是twitter bootstrap .hidden { display: none; } 现在我尝试了很多方法。 我尝试过fadeIn，我尝试将show（）或hide（）或toggle（）或fadeToggle（）的几种不同组合链接在一起。 我还尝试将隐藏div的所有子元素的迭代附加到回调并逐个执行fadeIn（），似乎没有任何工作。 我正在使用Google Chrome 26和IE10进行测试。 谢谢你的帮助！

使用jquery动画时的Erorr“行内存不足：13”

我试图用以下代码显示我的产品动画（jquery） var prodNum = ; var i = 1; $.timer(5000, function(timer) { $(“.prods”).hide(“slide”, { direction: “down” }, 500, function() { $(“.prods”).html(“” + $(“#pr” + ((4*i) % prodNum)).html() + “” + “” + $(“#pr” + ((4*i + 1) % prodNum)).html() + “” + “” + $(“#pr” + ((4*i + 2) % prodNum)).html() + “” + “” […]

使用Keith Wood的jQuery SVG插件动画外部加载的SVG

我正在尝试使用Keith Wood的插件为从外部SVG加载的一组路径的填充颜色设置动画。 首先，我将SVG导入div容器： $(document).ready(function() { $(‘#header-main’).svg({loadURL: ‘header.svg’}); var svg = $(‘#header-main’).svg(‘get’); }）; SVG文件如下所示： 我可以像这样更改组或单个路径的填充颜色： svg.style(‘#group1 {fill: black}’); 现在，当我尝试为这样的路径设置动画时： $(‘path’).animate({svgFill: ‘blue’}, 500); 或$（’＃group1’）。animate（{svgFill：’blue’}，500）; 或者与任何其他选择器，例如路径的id，没有任何反应。 但是，如果我要创建一个路径，并像这样动画它： var path1 = svg.createPath(); svg.path(path1.move(50, 90).curveC(0, 90, 0, 30, 50, 30). line(150, 30).curveC(200, 30, 200, 90, 150, 90).close(), {fill: ‘none’, stroke: ‘#D90000’, strokeWidth: 10}); $(‘path’).animate({svgFill: ‘blue’}, 500); 我创建动画的路径，但从header.svg文件导入的其他路径什么都不做。 我在这里做错了什么，或者插件是不是能够动画外部svg？