Tag: jquery animate

使用jQuery / CSS缩小/增长动画

如何使用jQuery和/或CSS完成增长/缩小动画？ 当您单击“ Join Now按钮时，我可以想到的一个示例。 我查看了animate.css，但他们没有提供这样的动画。

为什么gif动画只在jQuery中播放一次？

我有一个带有两个div的小页面，单击第一个div将弹出第二个div并隐藏第一个div，第二个div上有三个gif文件，一旦第二个div跳出，动画将开始播放。 单击第二个div将弹出第一个div并隐藏第二个div。 我想要的是，如果我再次回到第二个div，动画将再次播放，但在自动中它不会，它只是第一次。 为什么？ 看来在jQuery中，动画只会在div加载时第一次播放，有谁知道答案？ 非常感谢！

动画DIV高度的脚本突然改变了DIV的高度

我有以下脚本使用slideUp和slideDown效果，但在动画DIV的高度时无法正常工作： $(function () { var myTimer, myDelay = 500; $(‘.slide, .the_menu’).hover(function () { //when either a `img.menu_class` or a `.the_menu` element is hovered over, clear the timeout to hide the menu and slide the menu into view if it already isn’t clearTimeout(myTimer); $(‘.the_menu’).animate({height:’37px’},’fast’, function () { $(‘.the_menu’).stop(true, true).fadeIn(‘slow’); }); }, function () { //when either […]

Mouseover .animate在之前停止.animate

我有两个不同的.animate函数.. 向下滑动文档准备好的元素。 将鼠标hover效果添加到这些相同的元素。 问题在于，如果您碰巧将鼠标放在元素在文档准备就绪时滑入的区域，它们将停在鼠标所在的位置。 当然，目标是让元素自行滑动而不会中断。 http://photoshopmesta.net/sic/theTest/slide.html 另一件事……鼠标移动似乎将元素移动到略高于鼠标hover之前的位置…… 关于图像加载的任何想法？ 我把代码加载到文件准备好的文件中。 它尽可能快地加载图像，但我没想到无论图像是否加载，元素仍然会滑动…当然它们在滑动动作之前没有加载..：/ 编辑： 工作示例感谢@entropo http://jsfiddle.net/PnHpk/7/虽然可能是因为图像在一段时间后从那里消失所以inheritance人的例子有彩色背景而不是图像http://jsfiddle.net/PnHpk / 8 /

Animate.CSS – 添加IE支持？

我正在使用Animate.CSS，而我正在使用“铰链”效果让图像从屏幕上掉下来。 在真正的浏览器中运行良好，但当然不适用于IE 9或更低版本。 有没有办法使这个效果与jQuery或javascript一起使用？ 或者我是否必须添加jQuery过渡以淡出图像？ 谢谢！ 码： HTML CSS .fear{ position:absolute; left:150px; top:0px; } #animate { -moz-animation-delay: 5s; -webkit-animation-delay: 5s; -o-animation-delay: 5s; -ms-animation-delay: 5s; animation-delay: 5s; } JS var $j = jQuery.noConflict(); $j(document).ready(function() { $j(‘#animate’).addClass(‘animated hinge’); }); 这是我创建的小提琴，显示动画效果。

使用scrollTop的jQuery滚动问题

我有2个滚动问题，我认为在一个post中询问它们会更容易。 在我问之前，下面是我的jQuery代码我有问题。 $(“a”).click(function() { if(this.hash){ $(“#main”).animate({ scrollTop : $(“h3[name=”+this.hash.substr(1)+”]”).position().top – 120 },2000,”easeOutExpo”); } }); 情况：我在页面上发生的事情基本上是我有一个带有几个列表的侧面菜单。 每个列表中的每个项目都链接到我的主div部分或我的“内容”部分中的锚点。 单击列表项时，上面的代码将运行并滚动到其中一个锚点。 问题1：当我点击其中一个列表中的某个项目时，它会向下滚动到一个工作正常的锚点。 但是当再次单击相同的项目时，主区域会向上滚动到div的顶部。 我想解决这个问题是检查div的当前“滚动到”位置，然后如果自第一次点击后位置没有改变，则不允许代码再次运行，但我无法使其工作。 有关如何解决此问题的任何建议？ 问题2：再次如上所述，当我点击列表中的项目时，它会向下滚动到锚点。 我当时希望能够点击不同的列表项并让它滚动到该位置。 问题是，当我点击一个不同的列表项时，它会滚动到主div中的某个随机位置，我还没有锚定的位置。 任何人都可以解释我是如何做到这一点所以我可以从锚点滚动到锚点？ 注意：请通过在您的解释上面提出问题1或问题2作出回应，以便我知道您指的是哪一个。 谢谢 编辑：感谢Roko的帮助，我得到了它的工作。 对于未来的观众来说，这是一个工作演示的小提琴： http ： //jsfiddle.net/TsUcc/3/ ，以下是最终jquery代码的样子 $(“a”).click(function( e ) { e.preventDefault(); if(this.hash){ var target = ‘#’+ this.hash.substr(1); var destination = $(target).offset().top – 10; $(‘#main’).stop().animate({ scrollTop : ‘+=’ + […]

JQUERY – 从左上/右上或左下/右更改Div尺寸

我正在写我的个人网站，我有4个div包含在容器div中（见图） 现在单击我想将单击的div调整为容器的div维度 我做的。 现在我的问题是有一种方法可以resize： 第二个是从右上到左下角 第3个到左下到右上角 第4个从右下到左上 HTML http://pastebin.com/mid0ssC6 CSS http://pastebin.com/sx4BL9Jv JQUERY http://pastebin.com/1yG3vkew 我找到了一个解决方案，我很快就会发布:)

滚动时如何填充svg

我有svg行： 我需要在滚动页面时逐渐填充不同的颜色。 怎么做？

如何在jQuery中重复函数调用

我有这个代码： $(document).ready(function() { function loop(){ $(‘#picOne’).fadeIn(0).fadeOut(8000); $(‘#picTwo’).delay(2000).fadeIn(6000).fadeOut(5000); $(‘#picTree’).delay(10000).fadeIn(2000).fadeOut(16000); $(‘#picFour’).delay(12000).fadeIn(16000).fadeOut(5000); } loop(); }); 但是当最后一张图片淡出时，代码不会重复。 问题是什么？

在完成执行之前获取jquery的slideToggle（）的最终高度 – 在CSS中没有固定的高度

我需要在我的网站上使用div B根据另一个div A的运行时间更改高度动态更新。 div A使用jquery slideToggle() [在div A几个div上]，但div B应该只是改变（同时）以匹配div A的当前高度。 panel_toggle1和panel1包含在div A ： $(document).ready(function () { $(“#panel_toggle1”).click(function () { $(“#panel1”).slideToggle(“slow”, function () { var divAheight = $(“#divA”).height(); $(“#divB”).animate({ height: divAheight }, “slow”); }); }); }); 上面的代码确实基本上是我想要的，但是，由于callback() ，它等待slideToggle()完成之前对另一个div执行幻灯片效果（我被迫这样做因为sliteToggle()不吐超出div A的最终height()直到它完成）。 有没有办法做到这一点，以便div A和div B平滑更新？ 即有没有办法获得高度slideToggle()将在它完成之前更新div A （这样我就可以在div B上同时在div B上调用.animate() ）？ 注意：我没有为CSS中的任何div使用固定高度，我想保持简单 或者 ，有没有一种方法可以保持div B以匹配div A的高度与CSS？