Tag: 动画
帮助自定义jquery缓动function
我需要一个非常典型的jquery缓动函数。 它基本上与传统的easeInOut缓动相反，因为我希望这个过程从快速介绍到较慢的中间部分再到快速的outro（你可以称之为speedInOut）。 不幸的是，我的数学有点生疏，我需要有人指出我如何开始的正确方向。 双曲线的正弦曲线（sinh）在我正在寻找的方向上有所改变，但我需要它在两个轴上限制在0和1之间。 这是我正在使用的jquery缓动函数框架 $.easing.speedInOut = function(t, millisecondsSince, startValue, endValue, totalDuration) { if(t = 0) return startValue; if(t = 1) return startValue + endValue; // custom function should go here }; 任何帮助将不胜感激！
chart.js饼图动画，播放一次，在页面中的某个位置通过垂直滚动
我有一个简单的饼图，从chart.js开箱即可加载动画 – 我试图允许动画通过长垂直网页中的某个滚动点进行排队 – 想法是针对以下代码执行，只有一次新用户滚动或点击页面位置 – 动画将排队一次，就是这样。 这会造成很多麻烦 – 因为我已经能够使用断点和窗口滚动执行和显示/隐藏页面位置的元素，但是这个动画不会与内联执行，而是我试图实现这一点的每一种方式; 每当浏览器滚动条调整最轻微时，动画会刷新并重放。 它只是刷新，滚动>动画刷新>滚动>动画刷新。 有任何指针; chart.js文档在这方面不是很有用，因为大部分演示都是onDomready。 我已经发现了使用断点执行jQuery的方法，正如您在下面的注释代码中看到的那样，但实际的动画只是忽略并在每次滚动调整时触发。 这里还有主要的外部chart.js文件，它支持以下function。 Chart.JS外部JS var breakpoint = false; $(window).scroll(function() { if ($(this).scrollTop() > 1300 && !breakpoint ) { // do stuff // $(window).scroll(function() { // if ($(this).scrollTop() > 1100) { // $(function () { // $(document).ready(function () { var chart = null; […]
使用jquery更改rgba alpha透明度
可能重复： jQuery + RGBA彩色动画 嘿， 我想在hover时更改rgba值的不透明度，但不透明度保持在.07 ..也许你可以帮我找到错误。 CSS（IE黑客是单独的文件 – 这里不需要提及） .boxcaption{ float: left; position: absolute; height: 100px; width: 100%; background: rgb(255, 144, 11); background: rgba(255, 144, 11, 0.7); } JS var thumbslide = $(‘.boxgrid.captionfull’).click(function() { $(‘.boxgrid.captionfull.clicked’).removeClass(‘clicked’).children(‘.cover’).stop().animate({top: 230, background: ‘rgba(255, 144, 11, 0.7)’}, 350); $(this).toggleClass(‘clicked’).children(‘.cover’).stop().animate({top: 0, height:”230px”, background: ‘rgba(255, 144, 11, 1)’}, 350); });
jQuery – 文本颜色淡入
我找不到解决这个问题的简单方法。 当按钮点击出现错误时，我试图淡化某些文本的颜色变化。 if (document.getElementById(“username”).value == “”){ //First Name $(“#login_error”).text(“Please enetr a username!”).css(‘color’, ‘#FF0000’); $(“#username_label”).css(‘color’, ‘#FF0000’);fadeIn(3000); } 我可以改变颜色，但它是即时的。 我想让颜色的变化慢慢消失。 多谢你们！
CSS3 – 添加类以触发动画并在完成时删除类
我有一个div，当我点击它时，jquery添加了一个启动动画运行的类。 当动画停止时（3秒后），我希望删除该类，这样当再次单击div时，动画将重新开始。 这只是测试，目前只有Chrome浏览器。 这是我的CSS3： .spin360 { -webkit-animation-name: spin; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes spin { 0% { -webkit-transform: rotateX(0); } 100% { -webkit-transform: rotateX(-360deg); } } 这是我的脚本： $(document).ready(function () { $(‘#spinButton’).click(function () { $(‘#shape’).addClass(‘spin360’); }); }); 这是我尝试过的： $(document).ready(function () { $(‘#spinButton’).click(function () { $(‘#shape’).addClass(‘spin360’).on(‘webkitAnimationEnd’, function () { $(‘#shape’).removeClass(‘spin360’); }); }); […]
在requestAnimationFrame上添加缓动
我需要重现与此处相同的效果： http ： //www.chanel.com/fr_FR/mode/haute-couture.html =对鼠标移动事件的滑动效果。 我只需要动画部分的一些帮助。 function frame() { $(‘.images-gallery’).css({ ‘transform’: ‘translateX(‘+ -mouseXPerc +’%)’ }); requestAnimationFrame(frame); } requestAnimationFrame(frame); $(document).on(‘mousemove’,function(e){ mouseXPerc = e.pageX/containerWidth*100; }); 这是我到目前为止所做的。 它的工作原理，但你可以想象，它是非常原始的，我需要一些缓和 。 如何编辑我的frame() function以使其更平滑？ 编辑：我不能使用CSS转换/动画，因为我更改requestAnimationFrame上的值（每1/30秒）。
记录了Firefox / jQuery / CSS动画的错误？
我正在编写一个使用jquery来切换CSS类的网站，这些类运行CSS动画。 在Google Chrome和Internet Explorer 9/10中，一切都运行良好，在Firefox（Aurora 24和Firefox 23）上不会执行动画，但其余的都可以使用。 因此，例如，如果我单击一个应该隐藏一个框并显示另一个框的按钮，则在Chrome上执行平滑过渡动画，在Firefox上执行没有平滑过渡。 奇怪的是，如果我通过控制台更改应该设置动画的CSS值，则动画可以正常工作。 该网站有大约10个同时运行的动画，但只有5个正常运行。 试图禁用最后（和较重）3动画可以解决问题。 所以也许这是一种不适合Firefox管理的超载……？ 我不能提供一个JSFiddle，因为当我写一个它工作，所以不可能显示问题… 这是导致问题的代码部分： console.log(“3D Accelerated animation”); console.log(“oldpage = “+oldpage+”\npage = “+page+”\nnewpage = “+newpage); if(oldpage != newpage) eoldpage.removeClass(“active”); $(“.slider > li”).attr(“style”, “”).removeClass(“animation”); epage.css({“transform”: “translate3d(0, 0, 0)”}); enewpage .css({“transform”: “translate3d(” + pagew * db + “px, 0, 0)”}) .addClass(“active”); eboth.addClass(“animation”); enewpage.children(“section”).load(‘/pages/’ + newpage + “.php?lang=” + […]
jQuery显示/隐藏回调动画（不要它）
当我添加回调显示/隐藏时，我的元素开始动画。 我不想要它。 我只需要在显示/隐藏完成后添加一个function。 我无法使时间无效，因为我使用基于选项的function（元素可以动画，但如果它不想要，它必须只是显示 – 隐藏。附加回调，它不起作用:( 是否有一个巧妙的技巧来消除show / hide上的动画？ 或者是否有其他方式在动画完成后添加function？ 提前致谢！ 找到了解决方案！ 做就是了： show(”,”, function()…
jquery特定属性的动画
所以我正在使用gRaphael创建一些图表。 这将创建一个很酷的条形图线，其中包含一些点。 这些点具有……节点，其中x = 10 y = 20作为其属性。 例 rect x =“135.8”y =“115.8”width =“8.399999999999999”height =“8.399999999999999”r =“0”rx =“0”ry =“0”fill =“＃ff0000”stroke =“none” 如果可能的话，我想用jquery为这个人制作动画。 如果我这样做的话 $（ “矩形”）。点击（函数（{ $（本）.animate（{ ‘X’：30 }）; }）; 为了给x coordenate制作动画，我觉得它不起作用的原因很明显？ 呵呵。 此外，我已经尝试将属性x设置为变量并尝试设置动画，而不是任何动画。 任何人都可以用gRaphael帮助我制作动画和svg吗？ 这例如有效 $（“rect”）。live（’click’，function（）{$（this）.attr（’x’，100）;}）; 它移动节点，但当然不会动画它 谢谢！
jQuery动画颜色变化
我正在尝试将链接颜色从当前颜色更改为其他颜色。 $(window).load(function(){ $(‘.article-preview h1 a’).hover(function(){ $(this).animate({ color: #ffffff }, 1500); }); }); 由于某种原因，它不起作用。 我正在使用jQuery颜色插件 。
