Tag: jquery animate

来自对象中心的jquery动画: 我正在尝试创建一个类似于本页底部的产品查看器http://www.logitech.com/en-gb/ 。你可以看到产品从中心而不是左上角动画，我认为这是Jquery的默认设置。所以我正在做的是尝试设置宽度和高度的动画，然后尝试偏移，使其看起来像是从中心动画。我的代码如下所示： body { background: black; } .box { background: #fff url(‘pic.jpg’) no-repeat 0 0; width: 200px; height: 200px; margin: 10px 4%; float: left; } $(document).ready(function() { $(“.box”).hover(function() { $(“.box”).not(this).fadeTo(500, 0.5); $(this).animate({ width: 300, height: 300, left: -100, top: -100 }, 500); }, function() { $(this).animate({ width: 200, height: 200, left: 100, […]

javascript + jquery + setinterval + animation: 我遇到了setInterval和jquery animate的问题。这是我的代码： function slides1() { … $(“table#agah1”).animate({ “left”: first1 }, “slow”); $(“table#agah2”).animate({ “left”: first2 }, “slow”); } $(function () { cyc = setInterval(“slides1()”, 3000); }); 当切换到另一个浏览器选项卡，并在一段时间后返回时，动画会毫不拖延地继续这样做，因为我已经离开选项卡，然后行动正确。我添加了这些也没有任何运气： $(window).focus(function () { jQuery.fx.off = false; cyc = setInterval(“slides1()”, 3000); }); $(window).blur(function () { jQuery.fx.off = true; window.clearInterval(cyc); });

如何在动画完成后删除元素？: 我正在使用以下代码来动画div。 $(function() { $(“a.shift”).click(function() { $(“#introOverlay”).animate({ height: 0, }, 2000) }); }); 当动画结束时，我想将其删除。我怎样才能做到这一点？

如何使用！在jQuery animate（）函数中很重要: 请参阅下面的jQuery：我真的很想知道如何在这段代码中使用CSS !important对于height !important 。 $j(‘#lveis-wrapper_3’).animate({ opacity: 0.0, height : 200 }, 1200); #lveis-wrapper_3的CSS如下： #lveis-wrapper_3 { width: 844px !important; height: 936px !important; margin: 0pt 0pt 10px !important; padding: 0pt !important; float: none; } 我不能删除!important的height: 936px由于某些原因… 所以我想通过animate() jQuery函数改变那个height – 但是如何？

在动画制作过程中更改jQuery的动画持续时间: 是否可以在两个不同的值之间更改当前运行的jQuery动画的duration ？我试图通过直接分配来改变duration ，但没有成功： var timing = { duration: 4000 }; $(document).click(function (e) { timing.duration = 1000; }); $(‘#foo’).animate({top:200, left:200}, timing); …甚至，在step方法中更改fx.options.duration不会影响正在运行的动画： var state = false, $(document).click(function (e) { state = true; }); $(‘#foo’).animate({top:200, left:200}, { duration: 4000, step: function(now, fx){ if(state) fx.options.duration = 1000; console.log(fx.options.duration); // 1000 } }); 这是一个小提琴。有什么想法可以做到这一点？

CSS3在动画元素上旋转，导致不调用click事件: 好吧，这个问题给我带来了很多问题。当使用css3 -webkit-transform样式和任何类型的3d旋转（例如rotateY(30deg) ）时，将click事件绑定到此旋转对象是极不可靠的。请参阅下面的示例代码或查看此小提琴（要查看小提琴中的不可靠性，请单击元素的右侧）。此示例没有动画但仍受影响。 HTML： Click this box. CSS： #box1{ -webkit-transform: rotateY(30deg); } jQuery的： $(‘#box1’).click(function(){ alert(‘clicked box 1′); }); 我的意思是’不可靠’是不会总是抛出click事件（取决于你点击它的位置），有时事件根本不会抛出（无论你在哪里点击它）。有没有办法来修复或避免这种情况，以便在旋转和动画时使用CSS3元素？更新：在元素上使用CSS属性“float：left”似乎允许它在不运动时正确检测点击事件。有谁知道为什么浮动属性修复了这个？我的最终目标是让对象在运动中接收点击事件，但是，当我应用新的CSS3 rotate3d属性（实时，在另一个jquery事件上）来给对象动画时，click事件再次开始失败。

最简单的动画背景图像向左滑动的方法？: 将背景图像滑动到左侧并循环播放的最佳方法是什么？假设我有一个带有背景的进度条，我想在它处于活动状态时进行动画处理（比如在Gnome或OS X中）。我一直在玩$(…).animate()函数并尝试修改相关的CSS属性，但在尝试弄清楚如何修改background-position属性时，我一直在打砖墙。我不能只增加它的价值，我不确定这是否是最好的方法。任何帮助赞赏！

jQuery Smooth Scroll锚点并更新浏览器位置: 我正在使用此代码在页面上的锚点之间平滑滚动作为渐进增强 $(‘a[href*=#]’).click(function(e) { if (location.pathname.replace(‘/^\//’,”) == this.pathname.replace(‘/^\//’,”) && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $(‘[name=’ + this.hash.slice(1) +’]’); if ($target.length) { $(‘.active’).removeClass(‘active’); $(this).parent().addClass(‘active’); var targetOffset = $target.offset().top; $(‘html,body’) .animate({ scrollTop: targetOffset }, 750); e.preventDefault(); //location.hash = $(this.hash); } } }); 我的问题是，有没有办法像往常一样更新浏览器中的URL，但仍然可以顺利滚动？如果我取消注释最后一行，它将跳转到锚点，然后执行动画。

使用JQuery缓慢更改/淡化/动画图像: 这是我的img，当用户使用jQueryhover时，我想慢慢将此图像src更改为“oneHovered.png”。哪种jQuery方法最好这样做？我看到很多例子都希望我改变CSS背景。有什么可以直接改变src属性吗？

在jquery中使用css calc（）: 我怎样才能做到这一点？ $(‘#element’).animate({ “width”: “calc(100% – 278px)” }, 800); $(‘#element’).animate({ “width”: “calc(100% – 78px)” }, 800); 我可以这样做，如果它只是%或只有px ，但不是calc() ，我可以使用jQuery的其他选项吗？或者其他一些JavaScript技巧？当用户点击某个元素时，必须进行更改，因此： $(“#otherElement”).on(“click”, FunctionToToggle); 当用户单击$(“#otherElement”) ，必须发生切换效果。