Tag: 动画

如何使jQuery动画只工作一次？

我尝试制作一个动画，如果用户点击下一个并且它到达隐藏的图像，jQuery动画将生效以显示下一批图像。 例如，如果我有六个图像并且显示前三个图像，如果用户第四次点击，它现在将滚动以查看最后三个图像。 现在，我只想使用动画一次。 问题是，每次单击按钮时它仍然会继续动画。 如何只使用动画一次？ 这是脚本： next.onclick = function(){ document.getElementById(“defaultPic”).src = srcArray[(counter + 1) % numImages]; counter++; if(counter == 5) { document.getElementById(‘next’).disabled = true; document.getElementById(‘next’).style.opacity = ‘0.5’; document.getElementById(‘prev’).disabled = false; document.getElementById(‘prev’).style.opacity = ‘1’; } if(counter == 2) { $(function() { $(‘#next’).on(‘click’, function () { $(‘#imageList’).stop().animate({left : ‘-=285px’}, 1000); }); }); } }

如何滚动和动画SVG（绘图）？

我在插画家中绘制了一个SVG图像。 它类似于时间表。 当我向上和向下滚动页面时（我使用jQuery / JavaScript），我希望它能够进出。 事实上，没有JavaScript，布局是可以的（只有一件事），并且没有任何代码。 如果没有JavaScript（或没有JavaScriptfunction的用户），用户已经看到了SVG图像，只需滚动到页面底部，而不会绘制图像。 问题1 我想用JavaScript或jQuery来做这件事。 我已经研究过高低，尽管我理解了一些JavaScript和jQuery原理，但我并没有理解。 我看过Greensock的“Draw SVG”，但你必须付费才能访问该插件，我看过“snap.svg”，但似乎没有得到很好的记录，似乎不支持滚动。 在jQuery或纯JavaScript中有没有一个公平的方法呢？ 问题2 线的起点（左侧）距离边缘几个像素。 我似乎无法让它与窗户的左侧齐平。 有什么想法？ 对不起，我暂时无法发布图片 BGDR creative /* This section isfor the default overall styling for the entire site */ html { margin-top: -27px; padding: 0; } body { font-family: quicksand, didact-gothic, sans-serif; text-rendering: geometricPrecision; text-rendering: optimizeLegibility; margin:0; font-style: normal; font-weight: 300; […]

基于滚动的动画在定义区域之外工作

所以我是JS的新手。 我试图让滚动动画只在指定区域工作，但我的“position：fixed”标签使它出现在我的网站顶部并一直滚动它而不是动画开始和仅在其定义的框架中工作。 我有什么想法可以解决这个问题？ 这就是它的样子（这是钢铁侠头盔，请原谅未完工的网站）： http ： //frontlinecreative.co/test-page/ 这是我正在使用的代码： $(document).ready(function() { //variable for the ‘stroke-dashoffset’ unit var $dashOffset = $(“.path”).css(“stroke-dashoffset”); //on a scroll event – execute function $(window).scroll(function() { //calculate how far down the page the user is var $percentageComplete = (($(window).scrollTop() / ($(“html”).height() – $(window).height())) * 100); //convert dashoffset pixel value to interger var $newUnit […]

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

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

Animate Link点击下划线而不是hover？

我无法理解如何在点击时重新创建此效果而不是hover？ 我对jQuery不是很好，因此无法弄清楚如何在点击时触发这种情况。 我遇到了这个网站，以帮助创建我想要的效果（从左到右下划线）。 该演示可以在以下链接中看到…… CSS Sliding Underline 我目前正在使用以下js淡入div，我希望该行同时滑入它们。 新jsfiddle – http://jsfiddle.net/tfgou78c/4/ JS： $(function() { $(‘.submit_button’).click(function() { var elem = $(‘.form_wrap’); if (elem.css(‘display’) == ‘none’) { elem.fadeIn(1750); } else { elem.fadeOut(1750); } }); }); CSS： .form_wrap { display: none; } /* sliding underline LEFT TO RIGHT */ .sliding-ulr { display: inline-block; } .sliding-ulr:after { content: ”; […]

jquery knob animate on load section

我在网站上使用jquery.knob插件很容易实现。 我为它制作动画，一切正常，但是当我滚动到网页的特定部分时，我希望动画效果开始：例如，当我滚动到#about部分时。 任何人都知道这是否可行？ 提前致谢

css3和jquery加载页面滑块效果

嗨我正在尝试使用css3和jquery创建一个完整的页面加载滑块效果。 为此，我使用两个div来加载页面。 我有前一个，后一个和下一个按钮。 我有下一个效果的问题。 当我点击下一个按钮时，我现在用translateX（’100％’）将新页面加载到div 2中。 然后我将translateX（’ – 100％’）添加到div1（此时屏幕上的translateX（’0％’））。 效果应该是translateX（’ – 100％’）div1，然后是div2的translateX（’0％’）。 所有翻译都是1.0s的过渡。 这很有效。 但是，当我再次点击下一个按钮时，div1与translateX（’ – 100％’），（在左边，在屏幕外），所以我用translateX（’ – 100％’）删除了类，并用translateX添加另一个类（’100％’）过渡期。 然后我删除这个类并添加另一个带有translateX（’0％’）的类，转换为1.0s。 我为div2删除了带有translateX（’0％’）的类，并使用translateX（’ – 100％’）添加另一个向左移动。 但这不起作用。 div1由屏幕左侧而不是右侧进入。 任何的想法？ CSS .to-next { transform: translateX(100%); } .to-screen { transform: translateX(0%); transition-duration: 1.0s; } .to-left { transform: translateX(-100%); transition-duration: 1.0s; } HTML JavaScript $(‘#ajax-inserted2’).removeClass(‘to-screen’).addClass(‘to-left’); $(‘#ajax-inserted1’).removeClass(‘to-left’).addClass(‘to-next’).removeClass(‘to-next’).addClass(‘to-screen’);

我怎么能修复动画速度？

我有以下代码（请参阅下面的代码）。 它的工作原理但我有以下问题。 向下滚动并开始动画时，完成动画需要很长时间（大约4秒钟）。 换句话说，它开始非常慢。 我试图从JS和CSS转换中删除“慢”，但我没有运气，进度条动画停止工作或他们继续做动画非常慢。 代码背后的想法是，当你向下滚动动画开始时它应该具有正常速度。 我怎么能修复这个bug？ 谢谢 function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom = docViewTop)); } var IsViewed = false; $(document).scroll(function() { $(“.progress div”).each(function() { var display = $(this), currentValue = parseInt(display.text()), nextValue = $(this).attr(“data-values”), […]

jQuery background-image“淡入”动画

有人可以帮帮我吗？ 我有一个网站，图像设置为“body”元素的背景。 我需要创造一个像“淡入淡出”的效果。 这是网站http://www.ladycup.eu/ 。 如果缩小，则可以看到主内容框侧面的树叶。 这就是图像，如果你知道我的意思，我需要它从内容框下“增长”。 我已经阅读了很多关于这个主题的建议 – 比如在后台创建一个带有这个图像的div等等，但在这种情况下我不能这样做。 我真的很感激任何帮助……

为什么歌剧动画如此之慢？

似乎歌剧不能同时播放多个动画，请查看我正在构建的这个主题 。 我做了一个预加载器，它将图像散布在身体外的随机位置，然后以0.1秒的间隔动画每个图像，动画耗时0.8秒。 这是我做的function： function ea_preload_scatter() { if(item.length) { var scatter = $(window).height() + $(window).width(); item.addClass(‘loading’).each(function() { var positionX = [”,’-‘], positionY = [”,’-‘], x = Math.floor(Math.random()*2), y = Math.floor(Math.random()*2); if(positionX[x] === ‘-‘) { posX = -scatter; } else { posX = scatter; } if(positionY[y] === ‘-‘) { posY = -scatter; } else { posY […]