Tag: jquery animate

jQuery,问题与.animate()和.fadeIn()

在div .frame里面我还有3个div: .middle , .middle和.bottom 。 .bottom和.bottom display none ,当鼠标位于.bottom上时,jquery函数为animate , .bottom的高度增加, .bottom和.bottom显示为.fadeIn() 。 当鼠标超出.bottom , .bottom的大小正在减小,而.bottom和.bottom将以.fadeOut()消失。 我的CSS是: .frame{ border-style: solid; border-width: 1px; width:200px; height:200px; position: absolute; top:50px; left:50px; } .middle{ width:200px; height:200px; position: absolute; top:0px; } .top{ display:none; background-color:red; width:100%; } .bottom{ position:absolute; display:none; bottom:0px; background-color:red; width:100%; } 我的HTML: top middle bottombottombottombottom 和我的jQuery: var […]

弹跳球5次jquery / javascript初学者级别

我是js和jQuery的新手,想要实现一个简单的动画,这里曾多次讨论过:一个弹跳球。 但是,我没有找到我的具体问题的答案,因为已经讨论的主题已经变得更加复杂。 我想要一个非常简单的动画:五次弹跳并留在地面上,第六次。 到目前为止我所取得的成就。 但是对于五次弹跳我想要将弹跳距离减少20%的初始距离。 假设距离为100,它应首先弹回80到60 …到20到0。 你可以在这里看到我的尝试。 或者只是这里的js代码: $(function() { var time = 500; var bounces = 5; function bounceDown(){ $(“.ball”).animate({top: 200}, time, function(){ bounceUp(); }); }; function bounceUp() { $(“.ball”).animate({top: 100}, time); }; function shadowUp(){ $(“.shadow”).animate({width: 100, height: 10, left: 85, top: 245, opacity: 1}, time, function(){ shadowDown(); }); }; function shadowDown() { […]

jQuery .animate / .each chaining

我正在尝试将匹配的东西组合起来: $(“.item”).each(function(i) { //animation here }); 使用jQuery固有的链接function,强制动画等待上一个动画完成,例如: $(“.item”).each(function(i) { $(this).animate({marginLeft:”0″}, 60); }); 然后在动画完成后触发.load函数。 基本上,我想按顺序淡出四个项目[一个接一个,而不是一次全部],然后将四个新项目加载到同一个div中,替换前四个。 我怎么能以可重用/可变的方式做到这一点?

当它到达最后一个div时停止.animate()

所以我有一个网络应用程序,每个面板是480×300(状态栏为-20px)和两个向左或向右滚动的导航按钮。 现在一切都很好,除非你继续滚动显示的最大面板,它继续前进。 我想知道是否有可能在它到达最后一个面板后停止Jquery .animate()。 http://jsfiddle.net/gS33Y/

如何创建给定单词的动画字母增量,类似于动画数字计数器的工作方式?

我正在创建一个“动画字母增量器”,它从任何给定的单词开始,并从A开始递增该单词的每个字母。 例: Word = Dog D – Increments from A to D [A, B, C, D] O – Increments from A to O [A, B, C, D, E, F, G, H, I, J, K, L, M, N, O] G – Increments from A to G [A, B, C, D, E, F, G] 我想要实现的效果类似于这个jQuery动画数字计数器 ,除了我将增加字母而不是计数数字。 此外,单词的每个字母应该独立增加,但它们应该同时到达目的地字母。 […]

如何让多个jQuery animate()调用一个接一个地工作?

当我点击“aa”块时,“aa”和“bb”都会同时生成动画。 javascript是否以非阻塞方式将animate()函数发布到单独的线程中? 或者这个函数多次输入,有数千个使用阻塞类型函数调用的回调? 如何在需要时让animate()逐项处理项目(也许使用计时器可以做,但我必须总是使用计时器吗?)? function growbits(i,j) { $(i).animate({ height: “500px” }); // looks working concurrently $(j).animate({ width: “500px”}); // with this one }; asdasd gfhjjjgfhgkjfhkjtkjyhtkjyhkhfukhgkudfgk 我在min.js文件中找到了以下代码: self.element.animate( $.extend(style, top && left ? { top: top, left: left } : {}), { duration: o.animateDuration, easing: o.animateEasing, step: function() { var data = { width: parseInt(self.element.css(‘width’), 10), […]

在无限循环上加载窗口的jQuery动画?

我需要一只手使这个代码在下面工作。 我已经让它工作,以便当用户在图像上盘旋时它会动画,然后在失去焦点时向下,但现在我希望它在无限循环上的窗口加载上运行。 $(document).ready(function(){ $(window).load(function(){ $(‘.navImage’).animate({top:’-=13′}, 700) }, function(){ $(‘.navImage’).animate({top:’+=13′}, 700); }); }); 目前只有动画13像素,而不是向下,显然动画目前没有循环。 我需要使用某种回调吗? 任何帮助都会很棒,谢谢。 [编辑]删除高度:切换,并不意味着包括。

函数animate()中backgroundposition的扩展名在IE7或IE8中不起作用

此代码是由Alexander Farkas创建的扩展http://bit.ly/bZzOC8对于函数animate()使用两个值非常有用,如下例所示: $(‘div’).animate({ backgroundPosition:'(0 -5500)’ },330); 不幸的是,当使用IE7或IE8时,此扩展名不起作用。 下一个代码是backgroundPosition扩展: /** * @author Alexander Farkas * v. 1.02 */ (function($) { $.extend($.fx.step,{ backgroundPosition: function(fx) { if (fx.state === 0 && typeof fx.end == ‘string’) { var start = $.curCSS(fx.elem,’backgroundPosition’); start = toArray(start); fx.start = [start[0],start[2]]; var end = toArray(fx.end); fx.end = [end[0],end[2]]; fx.unit = [end[1],end[3]]; } var […]

动态更改iframe的内容

我有一个iframe标签,我想使用jquery动画动态更改它。 因此,例如iframe位于主页上,如果我单击about链接,它将加载https://stackoverflow.com/questions/10953458/dynamically-change-iframes-content/about.html,当它准备就绪时,它将使用动画将其向下滑动。 我有它的基本逻辑,但后来发生了这个 问题: 当我刷新页面时,它会加载index.html页面的内容,而我想要的是当我刷新它时,它仍保留https://stackoverflow.com/questions/10953458/dynamically-change-iframes-content/about.html的内容。 About 这只是最基本的逻辑,但我需要帮助我如何实现更新的部分/ 如果我不将它们包含在同一页面中但我仍然想要为页面过渡设置动画,该怎么办? 因此,当用户单击指向新页面的链接时,它将加载它,然后为其设置动画。如何实现此目的。 因为最近我看到了一个jquery插件callen LocalScroll并且他们实现了这个效果,但我无法让它适用于新页面

在动画时使元素不可点击

我正在尝试使元素在动画时不可点击。 动画完成后,我希望它再次可以点击。 我已经搜索了很长时间以获得有关如何实现这一目标的一些帮助,但我无法让它工作,我不知道为什么。 HTML: Allright BCD 单击字母A时,它会向左移动,然后某些文本会在其旁边淡入淡出。 jQuery: (function() { var letterA = $(‘#a’), llright = $(‘#llright’); $(‘#a:not(.open)’).live(‘click’, function() { letterA.animate({ marginRight: “5.7in”, }, 1300, function() { letterA.addClass(‘open’); llright.fadeIn(1300); // Animation complete. }); }); $(‘#a.open’).live(‘click’, function() { llright.fadeOut(700); letterA.delay(700).animate({ marginRight: “0.0in”, }, 700, function() { letterA.removeClass(‘open’); }); }); })(); 动画效果很好,但这不是: if(letterA.is(‘:animated’)) { letterA.unbind(‘click’); }; 最后一部分根本不起作用,即使我插入一个简单的alert()而不是unbind()它似乎没有弄清楚A何时移动而不是。 […]