Tag: jquery animate

jquery为.addClass添加淡入淡出

如何淡入淡出.addClass。 链接在这里 – http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.html 这是代码 – $(document).ready(function() { $(‘#menu li#Q_01,#menu li#Q_03,#menu li#Q_05,#menu li#Q_07,#menu li#Q_09,#menu li#Q_11,#menu li#Q_13’).hover(function() { $(this).addClass(‘pretty-hover’); }, function() { $(this).removeClass(‘pretty-hover’); }); }); $(document).ready(function() { $(‘#menu li#Q_02,#menu li#Q_04,#menu li#Q_06,#menu li#Q_08,#menu li#Q_10,#menu li#Q_12’).hover(function() { $(this).addClass(‘pretty-hover_01’); }, function() { $(this).removeClass(‘pretty-hover_01’); }); }); 谢谢

是否可以在javascript / jquery中停止执行？

基本上我希望能够在$ .holdTillFinished（）方法中包装任何命令，该方法不允许执行继续，直到指定的方法/ jquery动画执行完毕。 我怀疑这在javascript中可能很难甚至不可能，但我希望有人知道。 我不想听到如何将回调传递给动画以使其运行完整或其他任何类似的东西。 我真的想知道这样的事情是否可能以及如何去做。 如果任何人都知道一个能够排队用户定义的方法和动画的好队列插件，那就不会发生这种情况，那也很酷。 我真正想要的是一种延迟执行的方法。（同时仍然允许动画function）

jquery动画元素属性而不是样式

ASAIK jquery animate函数仅接受样式属性。 但我想动画元素的属性。 考虑一个SVG元素矩形 我想动画矩形元素属性“x”和“y”，如下所示 $(“#rect1”).animate({ x: 30, y: 40 }, 1500 ); 但这不是正确的方法，因为动画function会影响样式而不是元素的属性。 我知道有很多自定义插件就像raphel.js一样。 An Intro to Raphaël 但我不想使用自定义插件来做到这一点。 我想简单地在jquery.animate函数中这样做。 这可能吗 ？ 谢谢， 湿婆

检测页面上的任何内容是否正在设置动画

我知道:animated选择器，但目前正在遇到旧IE的（可能是少数几个）性能问题（如图）。 我觉得它可能是我正在测试任何页面动画的方式 。 目前我正在循环一个间隔，核心测试是$(‘*’).is(‘:animated’) 。 这个$(‘*’)是我担心的……但是因为我不知道在我的插件下动画的div / etc是什么，我不知道怎么做！ var testAnimationInterval = setInterval(function () { if ( ! $(‘*’).is(‘:animated’) ) { // all done animating clearInterval(testAnimationInterval); animationsFinished(); // callback function } }, 300); function animationsFinished() { // do whatever } 有人找到了更好/不同的方式吗？ 特别是在性能方面？

JQuery：animate（）在IE中没有按预期工作

我对这款IE 7感到疯狂…… ==> hhttp：//neu.emergent-innovation.com/ 为什么以下function在IE 7中不起作用，但与Firefox完全兼容？ 动画function中是否有错误？ function accordion_starting_page(){ // hide all elements except the first one $(‘#FCE-Inhalt02-ContentWrapper .FCE-Fade:not(:first)’).css(“height”, “0”).hide(); $(‘#FCE-Inhalt02-ContentWrapper .FCE-Fade:first’).addClass(“isVisible”); $(‘div.FCE-Title’).click(function(){ // if user clicks on an already opened element => do nothing if (parseFloat($(this).next(‘.FCE-Fade’).css(“height”)) > 0) { return false; } var toHide = $(this).siblings(‘.FCE-Fade.isVisible’); toHide.removeClass(“isVisible”); // close all opened siblings toHide.animate({“height”: “0”, […]

如何循环jquery div动画？

我正在尝试使用无限循环实现一个jQuery函数来动画div。 我无法弄明白该怎么做。 这是我的代码： $(document).ready(function() { $(‘#divers’).animate({‘margin-top’:’90px’},6000).animate({‘margin-top’:’40px’},6000); });

jQuery和ReactJS ONLY动画

我只需要使用jQuery动画，请不要提及过渡。 这是我的代码库 var CommentForm = React.createClass({ componentWillUnmount: function(cb) { console.log(‘hiding’) jQuery(this.getDOMNode()).slideUp(‘slow’, cb); console.log((this.getDOMNode())) }, componentDidMount: function() { jQuery(this.getDOMNode()).hide().slideDown(‘slow’); if (this.props.autofocus) { jQuery(this.refs.commentArea.getDOMNode()).focus(); } }, render: function() { return ( Comment ); } }); 正如您所看到的，我可以在安装组件时添加一个非常棒的动画，但是我无法使用动画卸载组件，就像我在代码中提到的那样。 有没有想过如何使用jQuery做到这一点？ 和Reactjs组件生命周期？

JQuery Scroll检测一次

我有一小段JQuery设计用于折叠我的标题，更改其尺寸，然后将其粘贴到屏幕的一侧。 这一切都与一部分不同，高度’切换’function每次用户滚动时都会触发，这真的很烦人。 有没有办法只检测一次滚动或只切换一次？ $(window).scroll(function () { var width = $(document).width() – 205; var height = $(document).height(); $(‘#me’).animate({ marginLeft: width, width: ’22px’, height: ‘toggle’, borderLeftWidth: “10px”, borderRightWidth: “10px” }, 1000, function() { $(“#me:first”).css(“margin-top”,”-90px”); var div = $(‘#me’); $(‘#me h1’).css(“font-size”,”30px”); var start = $(div).offset().top; $(div).css(“height”, height); $.event.add(window, “scroll”, function() { var p = $(window).scrollTop(); $(div).css(‘position’,((p)>start) ? ‘fixed’ […]

使用jQuery动画Bootstrap进度条宽度

我想在2.5秒内将进度条的宽度从0％设置为70％。 但是，下面的代码会在2.5秒延迟后立即将宽度更改为70％。 我错过了什么？ $(“.progress-bar”).animate({ width: “70%” }, 2500); JSFiddle： http ： //jsfiddle.net/WEYKL/

JQuery动画边框没有移动div

我希望动画一个div，首先让它的边框在mouseenter上加5px，然后在mousele上减少5px的边框，棘手的部分是我不希望div看起来像是在移动（如果你只是动画边界，整个div看起来会变化，而不仅仅是边界越来越厚。 我非常接近，但我最后一部分停留在：mouseleave。 到目前为止我所拥有的是： $(“#thumbdiv”).bind({ mouseenter: function(){ $(this).animate({ borderRightWidth: “25px”, borderTopWidth: “25px”, borderLeftWidth: “25px”, borderBottomWidth: “25px”, margin: “-5px” }, 500); }, mouseleave: function(){ $(this).animate({ borderRightWidth: “20px”, borderTopWidth: “20px”, borderLeftWidth: “20px”, borderBottomWidth: “20px”, margin: “0px” }, 500); } }); 在此之前我将边框设置为20px，边距未设置，因此它是0px。 div在mouseenter上动画效果很好，我可以让边框更粗而没有div实际移动到位，但是当mouseleave被触发时，div将首先将自身重新定位到该位置，好像从未调用“margin -5px” ，然后缓慢地减少它的边界，似乎实际上没有调用“magin：’0px’”。 我不确定我的描述是否有意义，如果需要我可以提出原型。