草庐IT

滚动动画

全部标签

javascript - 动画等待执行

我正在尝试使用CSS为元素高度设置动画。我这样做的方式是,我向一个元素添加了一个触摸事件。该函数将className添加到应该隐藏的元素,即高度为0。问题是,当元素被点击时,本应获得0高度的div暂停了一秒钟,然后获得了所需的高度。似乎动画持续时间越长,它在动画之前等待的时间就越长。相关代码如下:transition:max-height2sease-in-out;JSFiddlevarheading=document.getElementById('heading'),body=document.getElementById('body');heading.addEventListe

javascript - 使用 jQuery 的淡入/淡出动画效果

要了解我的代码,请访问此页面:请先点击包装过滤器http://codepen.io/mariomez/pen/qNrzAr?editors=0010这是一种简化的动画过滤方法。每个红框可能有多个类别作为过滤器的标识符。我使用这段代码的目标是实现一种漂亮的淡入和淡出动画方式。现在我设法做到这一点只是为了淡入。尽管我编写了淡出动画,但我无法在JS代码中正确使用它。1个过滤器的示例:我希望除“packaging”之外的所有类都能很好地淡出并让packaging类淡入。jQuery代码$(document).ready(function(){$(".filter-logo").click(fu

javascript - iPhone OS 3.0 中使用 webkit-transform translate() 的慢速动画

iPhoneOS3.0中的JavaScript处理有什么变化吗?此代码适用于Safari4PublicBeta和iPodTouch2.0,但不适用于装有iPhoneOS3.0的iPodtouch。目的是在2秒内将框向右移动一点,但在3.0中它只是跳到新位置,没有动画或延迟。iPhoneJStesting.box{position:absolute;width:150px;height:150px;background-color:red;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:2

javascript - 获取滚动条的 `distance`

使用javascript是否可以计算出距离,或者窗口向下滚动的像素距离?问候菲尔 最佳答案 这将用于获取元素与文档顶部的距离:document.documentElement.scrollTop您需要确保该元素是可滚动的。来自MozillaMDN:Iftheelementcan'tbescrolled(e.g.ithasnooverfloworiftheelementisnon-scrollable),scrollTopissetto0 关于javascript-获取滚动条的`dista

javascript - 多个元素上的 jQuery 动画,单个动画线程/计时器还是多个?

我想知道jQuery选择器何时返回多个元素,并且我在所有这些元素上执行了一个“slideDown”...$('.allthisclasss').slideDown();是否存在单个代码循环同步向下移动所有对象,或者jQuery是否分别处理所有对象并且它们每个都有一个执行线程来移动它们自己?我的问题是关于动画优化,如果所有对象只有一个计时器而不是每个对象一个,那就太好了。有人知道jQuery如何处理这种情况吗? 最佳答案 所有动画都会自动添加到jQuery中的全局效果队列中。但这并不意味着它们是按顺序动画的,制作一个简单的测试页面,其

javascript - jQuery 滚动事件 - 检测元素滚动到 View 中 - 在 Chrome 上性能不佳

以下代码在IE和Firefox上工作正常,但Chrome讨厌它(它运行但真的很慢)。我确信它可以使浏览器更加友好,但是怎么做呢?itemPlaceholder是数百个100x100的floatdiv(例如图像占位符)。我正在使用jquery1.4.4和Chromev10.0.648.127。$(function(){ReplaceVisible();$(this).scroll(function(){ReplaceVisible();});});functionReplaceVisible(){$('.itemPlaceholder').each(function(index){if(

javascript - jQuery 中的生涩动画问题

我这样做了很多次都没有问题,但由于某种原因,它在Here上出现了问题。.向下滑动将开始正常工作(1/3),然后突然猛拉并完成动画。向上滑动效果很好。slideDown()、slideToggle和.animate()就是这种情况奇怪的是,如果我也在动画功能中切换不透明度,它不会SCSS,但我的文字会短暂地改变颜色。HTML:PhthalateFree:DibutylPhthalateislinkedtocancerandispresentinnailpolish,perfume,softplasticsandskincareproducts.CSS:我读到其他内容是边距会导致抖动,但这

javascript - 鼠标移动时滚动窗口

大家好我的意思是当鼠标向窗口边缘移动时(x或y或两者),我希望页面滚动,当鼠标停止移动时,我希望页面停止滚动。有许多示例说明如何基于使用onClick事件或窗口边缘的滚动区域进行滚动,但基于鼠标光标。如有任何帮助,我们将不胜感激。 最佳答案 网页已经设计为可以使用滚动条、page/home/end/arrow键等进行滚动。是否有任何理由不适合您的页面?更改预期功能通常不是一个好主意。您可以阅读mousemove事件在这里。不管怎样,下面的代码应该可以工作,但我真的不推荐使用它。对于有敏感鼠标的人来说,这尤其令人迷惑://Variab

javascript - 确定导致滚动事件启动的原因

众所周知,scroll事件可以通过使用鼠标滚轮、单击滚动条箭头或动态地使用window.scrollTo(left,top)函数来触发。是否有可能确定是什么导致了scroll事件启动?是用户干预还是JS代码? 最佳答案 我认为您无法确定导致滚动的原因。滚动事件仅表示窗口正在滚动,而不是为什么它在滚动。但也许您在从您的代码调用window.scrollTo()之前暂停了滚动事件监听器或设置了一个标志。在Safari中,如果您使用scrollTo(),滚动事件只会触发一次,无论您滚动多少,因此您可以想象做这样的事情://somewher

javascript - 使用 JavaScript 动画化 CSS3 转换的值是否排除了硬件加速?

您可以通过设置动画持续时间并设置CSS3变换的初始值和最终值来利用硬件加速动画。如果不设置动画持续时间和使用关键帧,而是直接使用JavaScript为所需的CSS3转换值设置动画,会怎样?您是否仍会利用硬件加速,或者硬件加速已被排除? 最佳答案 除非您使用转换,否则它不会为webkit浏览器进行硬件加速。此外,只有3d变换被加速,因此确保元素在可用时使用3d渲染树的快速方法是添加:-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);顺便说一下,转换速度很