Tag: 动画

使用jquery平滑滚动: 我知道有关SF的平滑滚动的问题，但我无法找到我想要的东西。已经使用了改进的平滑滚动脚本，但它是我想要实现的网站http://michaelacevedo.com上的那个。当你点击链接然后它开始真正慢，然后快速动画带你到所需的部分。它与其他平滑卷轴完全不同。任何人都可以帮助实现这种效果并解释代码在做什么。谢谢

jquery – 单击并激活活动按钮: 在jQuery中：场景** – 我有四个具有hover效果的Div。 – 全部使用jquery动画移动backgroundPosition以显示hover状态。问题** – 我想设置一个焦点或点击状态，这样一旦你点击一个按钮，它就会进一步激活背景位置以显示新状态。如果点击任何其他按钮并删除当前的点击状态并开始在新选择的按钮上设置新的点击状态动画，我也希望按钮能够识别…？我的努力** – 我做了一些编码，但似乎无法解决这个焦点状态，再次提前感谢!! ;） HTML ** CSS ** #mainServices_01 { width:103px; height:131px; float:left; background:url(../images/slideHover.png) repeat 0 0; background-position: inline; } #mainServices_02 { width:103px; height:131px; float:left; background:url(../images/slideHover.png) repeat 0 0; background-position: inline; } #mainServices_03 { width:103px; height:131px; float:left; background:url(../images/slideHover.png) repeat 0 0; background-position: inline; } #mainServices_04 […]

JavaScript for循环中的jQuery无法正常工作: 我试图在for循环中运行jQuery，如下所示： var frameNumber = 15; // How many frames are in your animation for(var i = 1; i < frameNumber + 1; i++){ var flipDelay = i * 100; $('.flipbook').delay(flipDelay).addClass('flipbook-' + i); } 我试图获得相当于此但更灵活，所以我可以改变我使用的帧数： $(function(){ setTimeout(function(){ $(“.flipbook”).addClass(“flipbook-1”) }, 100 ); setTimeout(function(){ $(“.flipbook”).addClass(“flipbook-2”) }, 200 ); setTimeout(function(){ $(“.flipbook”).addClass(“flipbook-3”) }, 300 ); setTimeout(function(){ $(“.flipbook”).addClass(“flipbook-4”) }, 400 ); […]

如何让多个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), […]

在动画时使元素不可点击: 我正在尝试使元素在动画时不可点击。动画完成后，我希望它再次可以点击。我已经搜索了很长时间以获得有关如何实现这一目标的一些帮助，但我无法让它工作，我不知道为什么。 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何时移动而不是。 […]

如何使用jQuery动画边框绘制？: 我想在hover时在我的链接周围画一个边框，像这样的动画画像http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html 请给我一些片段或链接。谢谢这就是我试图用jquery动画它的方法 $(‘a’).on(‘hover’, function() { $(this).animate({ border: ‘1px’ }, ‘slow’, ‘linear’); $(this).animate({ border: ‘solid’ }, ‘slow’); $(this).animate({ border: ‘#ccc’ }, ‘slow’); });

使用Javascript动画的2个图像: 从研究和寻求帮助到目前为止，我已经使用下面的JSFiddle中的代码构建了一个从左到右移动的动画。这每20秒循环一次。 http://jsfiddle.net/a9HdW/3/ 但是现在我需要一个从右向左移动的第二个图像，并在第一个图像完成动画后自动触发。如果你能做到这一点那将是惊人的。提前致谢 window.requestAnimFrame = (function(){ window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); var canvas = document.getElementById(“canvas”), cx = canvas.getContext(“2d”); function Card(x,y){ this.x = x || -300; this.y = y || 0; this.width = 0; this.height = 0; this.img=new Image(); […]

将回调function添加到自定义JQuery动画的真正方法是什么？: 我在stackoverflow问题中找到了一个震动效果（这里）代码如下; jQuery.fn.shake = function(intShakes, intDistance, intDuration) { this.each(function() { $(this).css(“position”,”relative”); for (var x=1; x<=intShakes; x++) { $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4))) .animate({left:intDistance}, ((intDuration/intShakes)/2)) .animate({left:0}, (((intDuration/intShakes)/4))); } }); return this; }; 但是我需要一种方法来添加一个回调函数（或任何其他简单的方法），用于在效果之前追逐抖动元素的边框颜色，并在动画编译后切换到原始颜色。我尝试下面但没有机会（边框立即变成原色） jQuery.fn.shake = function(intShakes, intDistance, intDuration,callback) { this.each(function() { $(this).css(“position”,”relative”); for (var x=1; x<=intShakes; x++) { $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4))) .animate({left:intDistance}, ((intDuration/intShakes)/2)) .animate({left:0}, (((intDuration/intShakes)/4))); } }); […]

jQuery动画脚本只在IE中运行第一个动画function: 所以我有这个Javascript代码块（见下文），它适用于Firefox，Chrome和Safari。在IE中，它运行第一个动画function $(“.slide1_background”).animate({ yada yada yada然后什么都没有。我尝试在它之后发出警报，这也不会触发。背景图像有一个单独的滑块脚本。这是一个Joomla模块。该网站位于这里。任何人都可以对这种情况有所了解吗？ $(window).load(function() { swap(); }); function swap() { //INITIAL LOAD AND SLIDE window.setTimeout(function() { $(“.slide1_background”).animate({ left: ‘-=1973’, opacity: ‘1’, display: ‘block’ }, 1000, ‘easeOutBack’); $(“.slide1_text”).animate({ left: ‘-=1973’, opacity: ‘1’, display: ‘block’ }, 1000, ‘easeOutBack’, function() { $(“.slide2_background”).css(“left”,”960px”); $(“.slide2_text”).css(“left”,”493px”); slideInSlide2(); }); }, 9000); }; function slideInSlide2() […]

无论如何将css3过渡动画添加到jQuery事件上的元素: 有没有办法在jQuery事件上添加css3动画，例如： .box{ width:100px; height:100px; bakground-color:#000; } .animate{ width:0px; -webkit-transition-property: width; -webkit-transition-duration: 500ms; -moz-transition-property: width; -moz-transition-duration: 500ms; } click me to animate $(‘button’).click(function(){ $(‘.box’).addClass(‘animate’); });