Tag: jquery animate

在谷歌浏览器中,Jquery hide()和show()运行速度太慢

我有一个在Chrome中无法正常运行的Web应用程序。 在Firefox中完美运行。 我有一个包含大量列表项的页面,确切地说是316。 每个列表项都包含大量HTML。 我的问题是当我想隐藏或显示这些列表项时。 我在jsFiddle上有一个测试页面来显示我遇到的问题。 我将HTML页面剥离到一个无序列表以保存所有316个列表项。 我有两个按钮,只需在点击时调用jQuery hide或show。 同样,这在Firefox,Opera,甚至IE中运行得很快,在Safari中非常好,但在谷歌Chrome中它可能需要30秒以上,这会打开对话框窗口,询问您是否要杀死页面,因为脚本运行时间很长。 这是jsFiddle的链接 http://jsfiddle.net/oumichaelm/UZCZc/3/embedded/result/ 感谢任何输入。 JMM

Jquery动画隐藏和显示

当我点击链接时,我想一次发生两件事。 我正在慢慢浏览Jquery文档,但尚未了解我的需求。 这是我网站的链接 当我点击服务链接时,我希望隐藏#slideshow div,并使用新的div替换它。 我试图让幻灯片显示单击服务链接动画,但它可以执行动画function或转到链接的html页面,而不是两者。 我将如何实现这两个目标。 如果我只是在同一页面上隐藏和显示div,或者如果我转到一个新的html页面,则无关紧要。 我只想拥有动画function并在隐藏内容时更改内容。 这是我正在使用的jquery代码 $(document).ready(function(){ $(“a.home”).toggle( function(){ $(“#slideshow”).animate({ height: ‘hide’, opacity: ‘hide’ }, ‘slow’); }, function(){ $(“#slideshow”).animate({ height: ‘show’, opacity: ‘show’ }, ‘slow’); } ); }); $(document).ready(function(){ $(“a.services”).toggle( function(){ $(“#slideshow2”).animate({ height: ‘show’, opacity: ‘show’ }, ‘slow’); }, function(){ $(“#slideshow2”).animate({ height: ‘hide’, opacity: ‘hide’ }, ‘slow’); } ); }); 家庭和服务是两个链接,我想点击服务时隐藏#slideshow […]

窗口上的jQuery滚动动画背景图像位置

我试图使用jQuery实现滚动效果。 我有一个背景div设置为100%浏览器窗口大小,隐藏溢出。 这有一个大的背景图像约。 1500px x 2000px。 我想要的效果是当用户向下滚动页面时,背景图像以滚动距离的百分比移动,因此对于每页向下滚动200px,图像在相同方向上移动10px。 谁能指出我正确的方向? 这有可能吗? : ) 提前谢谢了。 UPDATE 我已经尝试了@Capt Otis的建议的变化,但我仍然在努力解决我正在玩的代码如下: $(window).scroll(function(){ if($(this).scrollTop() > 200) { $(‘#div’).animate({‘background-postion’: ‘+=10px 0’}, 500); } }); 任何人都可以解释我做错了什么吗?

jQuery切换动画不适用于新的jQuery

我在jQuery 1.8.2上有这个切换的问题我工作但是在1.11.0没有。 你能帮我解决什么问题吗? $(‘.open’).toggle(function () { $(‘.obj’).animate({ top: “0” }, 500); },function () { $(‘.obj’).animate({ top: “-8%”, }, 500); });

纯jQuery动画的特殊颜色过渡效果//没有ui或其他图书馆

我试图创建没有任何外部插件的jQuery颜色动画。 到目前为止,我可以设法用jQuery-ui做到这一点,但我想用pure jQuery animate()学习这种方式 有没有可能用更少的代码和1.8上没有任何外部jQuery插件来做到这一点? 这是使用jQuery 1.7.2和ui的 jsFiddle示例 jQuery的: var Text = $(‘h1’); var Box = $(‘.box’); Text.click(function() { Text.animate({‘color’:’#f00′},600) .delay(200).animate({‘color’:’#ff0′},600) .delay(200).animate({‘color’:’#000′},600); }); Box.click(function() { Box.animate({‘background-color’:’#f00′},600) .delay(200).animate({‘background-color’:’#ff0′},600) .delay(200).animate({‘background-color’:’#000′},600); });

使用animate.scrolltop和(target).offset()计算固定标头.top;

这应该是一个非常基本的问题,但是我早上大部分时间都在扔它,而且此时我已经接近了。 我甚至没有一点js foo – 但我找到了一个很好的评论代码块,我希望用它来动画锚链接: $(document).ready(function() { $(‘a[href*=#]’).bind(‘click’, function(e) { e.preventDefault(); //prevent the “normal” behaviour which would be a “hard” jump var target = $(this).attr(“href”); //Get the target var scrollToPosition = $(target).offset().top; // perform animated scrolling by getting top-position of target-element and set it as scroll target $(‘html, body’).stop().animate({ scrollTop: scrollToPosition}, 600, function() { location.hash […]

jQuery:在IE中动画不透明度

使用具有纯黑色的div可淡化其下方的图像。 在Chrome和Firefox中,这种方法很好,但是,在IE中,它是倒退的。 $(“div#bgcover”).animate( {opacity:.70}, 2500); 这从0%不透明度开始,随着时间的推移应该动画为70%。 然而,在IE中,它从0%跳到100%,然后逐渐减少到70%。 正在寻找一个解决方案。 谢谢。

jQuery:HEX到RGB计算浏览器之间有什么不同?

以下代码在所有浏览器中都能完美运行,禁止使用IE浏览器。 照常。 这是需要发生的事情: 将鼠标hover在链接上时,获取该链接颜色。 获取该颜色的RGB值,因为基本CSS将始终设置为HEX值; 使用新的RGB值并进行计算以确定该颜色的较浅色调 在0.5秒的时间内为新的较浅色调制作动画 移开鼠标时,将颜色恢复为原始值 正如我所说,到目前为止,代码工作得非常好,除了在IE中。 任何拥有一双新鲜眼睛(以及完整的发际线)的人都可以看看这个吗? 可以做到与众不同吗? function getRGB(color) { // Function used to determine the RGB colour value that was passed as HEX var result; // Look for rgb(num,num,num) if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])]; // Look for rgb(num%,num%,num%) if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) return [parseFloat(result[1]) * 2.55, parseFloat(result[2]) […]

使用Timer JQuery更改背景颜色CSS

我希望有人可以向我展示高效的JQuery,以便在div类中的4种背景颜色之间制作动画。 我希望这些事件能够被时间触发,而不是点击或hover。 我已经看过hover和切换的post,但作为一个不太精通JQuery的人,我觉得在这里和那里复制和粘贴部件感觉不舒服。 谢谢

JQuery背景颜色动画不起作用

我想将“exampleDiv”的背景颜色从原始白色背景更改为当我调用下面的代码时立即将背景变为黄色,然后淡出回原始的白色背景。 $(“#exampleDiv”).animate({ backgroundColor: “yellow” }, “fast”); 但是,此代码不起作用。 我只有JQuery核心和JQuery UI链接到我的网页。 为什么上面的代码不起作用?