jquery-animate | 易学教程

javascript + jquery + setinterval + animation

阅读更多关于 javascript + jquery + setinterval + animation

I'm having a problem with setInterval and jquery animate. Here is my code: function slides1() { ... $("table#agah1").animate({ "left": first1 }, "slow"); $("table#agah2").animate({ "left": first2 }, "slow"); } $(function () { cyc = setInterval("slides1()", 3000); }); When switch to another browser tab, and return after a time, the animation keep doing it without delay, for the time I've been away from the tab, and then act correct. I've added these also without any luck: $(window).focus(function () { jQuery.fx.off = false; cyc = setInterval("slides1()", 3000); }); $(window).blur(function () {

Animating the background color of an HTML table's cell (or the whole row) on an event

阅读更多关于 Animating the background color of an HTML table's cell (or the whole row) on an event

I have a table with a menu (food items) with several rows and columns. The 2nd column contains a link to the food item. When the user clicks it, the item is added to a shopping cart. I'd like to give the user some visual feedback that the click and adding actually worked. I already have a click handler for the link that adds the item clicked on to the cart. A simple alert('Item successfully added'); works but is not really pretty. I'd like the table cell (or the whole row) to "flash" once. By "flashing" I mean "change its background color smoothly from current (light gray) to e.g. yellow and

How to remove an element AFTER animation completes?

阅读更多关于 How to remove an element AFTER animation completes?

I'm using the following code to animate a div. <script> $(function() { $("a.shift").click(function() { $("#introOverlay").animate({ height: 0, }, 2000) }); }); </script> When the animation finishes, I would like to remove it. How can I do that? animate takes 2 more params, so you could do: $("a.shift") .click(function() { $("#introOverlay") .animate({height: 0}, 2000,"linear",function() { $(this).remove(); } ) } ); Untested. EDIT: Tested: here's the full page I used, which expands to 300px make removal more obvious: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR

jQuery animate decimal number increment/decrement

阅读更多关于 jQuery animate decimal number increment/decrement

I would like to animate difference between two decimal numbers step by step. Have found Joss Crowcroft's solution for integer numbers that works nice and I've made example on jsfiddle . Code snippet: $({numberValue: 35}).animate({numberValue: 100}, { duration: 1000, easing: 'linear', step: function() { $('#dynamic-number').text(Math.ceil(this.numberValue)); } }); But if I want to animate for example number 2.85 to 3.25, can't be done on ths way. There have to be animated both parts, integer and decimal. Can it be made on simplier way except separated animations for integers and decimals? You

Fade in/out fixed position div when user scrolls to very bottom of page

阅读更多关于 Fade in/out fixed position div when user scrolls to very bottom of page

问题 This seems pretty elementary, but I am trying to get a fixed-position footer div to slide & fade in when a user scrolls to the very bottom of a webpage and then slide & fade out when the user scrolls back up. I have searched Stack Overflow and others have suggested solutions, but my code causes my div to only to slide & fade in. I can't get the div to slide & fade out when the user scrolls back up. Also, this div slides & fades in right after I begin scrolling. I need it to wait until it gets

CSS3 Rotate on animated element causing click event not to invoke

阅读更多关于 CSS3 Rotate on animated element causing click event not to invoke

Okay this one is causing me a lot of problems. When using the css3 -webkit-transform style with any kind of 3d rotation (such as rotateY(30deg) ), it is extremely unreliable to bind a click event to this rotated object. See the example code below or look at this fiddle (to see the unreliability in fiddle, click on the right side of the element). This example does not have animation but still is affected. html: <div id='box1'>Click this box.</div> css: #box1{ -webkit-transform: rotateY(30deg); } jquery: $('#box1').click(function(){ alert('clicked box 1'); }); What I mean by 'unreliable' is that

Animate Divs One Right After the Other with Jquery

阅读更多关于 Animate Divs One Right After the Other with Jquery

Im trying to animate multiple divs, fading in, one right after the other in sequence when the page loads. I also want to do it in reverse, fading out in sequence, when i click to go to another page. How do i go about setting this up in jquery? Kind of hard to give you an example since there are so many ways to animate in jQuery, but here's a simple example. Animating two <div> s, one after the other (on page load): See working example here: http://jsfiddle.net/andrewwhitaker/p7MJv/ HTML: <div id="animation-one">Hello!</div> <div id="animation-two">Jquery Animate!</div> CSS: #animation-one,

Slowly change/fade/animate an image changing with JQuery

阅读更多关于 Slowly change/fade/animate an image changing with JQuery

This is my img, <img src="one.png" id="one" onMouseOver="animateThis(this)"> I want to slowly change this image src to "oneHovered.png" when the user hovers over using jQuery. Which jQuery method is best to do this? A lot of examples I see want me to change the CSS background. Is there anything to alter the src attribute directly? jmort253 You could start by first fading out the image, controlling the duration of the fadeout using the first optional parameter. After the fade out is complete, the anonymous callback will fire, and the source of the image is replaced with the new one. Afterwards,

Scrolling a jQuery animation backwards and forwards

阅读更多关于 Scrolling a jQuery animation backwards and forwards

问题 I am making a futsal (indoor soccer) coaching application which allows a coach to add players on the screen, set their movement direction (by drawing arrows using HTML5 canvas), and then press 'play' to move all players on the screen. A player is made up of a div with a background image of a player. Animation is being done by using jquery .animate() function. All I do is change the player div's left and top css position attributes. I would like to do two things and unsure on how that can be

Use css calc() in jquery

阅读更多关于 Use css calc() in jquery

How can I do this? $('#element').animate({ "width": "calc(100% - 278px)" }, 800); $('#element').animate({ "width": "calc(100% - 78px)" }, 800); I can do it if it's only % or only px , but not calc() , can I use some other option of jQuery? or some other trick of JavaScript? It's a change that have to be done when the user clicks some element, so: $("#otherElement").on("click", FunctionToToggle); when the user clicks the $("#otherElement") the toggle effect has to occur. maybe this helps: $('#element').animate({ "width": "-=278px" }, 800); every time this script will remove 278px from the