jquery-animate | 易学教程

Transparent PNG animate problem on Internet Explorer

阅读更多关于 Transparent PNG animate problem on Internet Explorer

问题 CSS Code: #btn{ background: url(transparent.png) no-repeat; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } JavaScript/jQuery: $("#btn").animate({opacity:1,"margin-left":"-25px"}); I don't have any problem with the code above on Firefox, Chrome and others. But it does not work on any version of Internet Explorer. The problem is the PNG image is rendered strange, background of the transparent PNG looks black. When I remove opacity effect, there is no problem. What

jQuery animate of custom value (not a CSS property)

阅读更多关于 jQuery animate of custom value (not a CSS property)

I'd like to do the strangest thing: make a value change with animate which isn't a css property but just a variable. I need this because I want to rotated an element when an user clicks on its border. So I need to animate the angle value and then use it in a custom drawing algorithm. I tried to use css property of an hidden DIV just to store it's angle value and animate it, but it doesn't work properly. Can anyone helps me with it please? Just stumbled upon this while searching for the same thing and the correct answer appears to be $({foo:0}).animate({foo:100}, { step: function(val) { // val

jQuery's $('#divOne').animate({zIndex: -1000}, 2000) does not work?

阅读更多关于 jQuery's $('#divOne').animate({zIndex: -1000}, 2000) does not work?

问题 I tried jQuery's $('#divOne').animate({zIndex: -1000}, 2000) to that element which has a z-index of 1000, but it is still above the other elements? (If I use firebug to change it to -1000 then it will be below other elements) 回答1: jQuery attempts to add a unit to the value on each step of the animation. So, instead of 99 it'll be 99px which, of course, isn't a valid zIndex value. It doesn't seem possible to set the unit used by jQuery to simply a blank string -- it'll either take the unit you

How to increment number using animate with comma using jQuery?

阅读更多关于 How to increment number using animate with comma using jQuery?

I'm trying to increment a number inside an element on page. But I need the number to include a comma for the thousandth place value. (e.g. 45,000 not 45000) <script> // Animate the element's value from x to y: $({someValue: 40000}).animate({someValue: 45000}, { duration: 3000, easing:'swing', // can be anything step: function() { // called on every step // Update the element's text with rounded-up value: $('#el').text(Math.round(this.someValue)); } }); </script> <div id="el"></div> How can I increment a number using animate with comma? Tats_innit Working Demo http://jsfiddle.net/4v2wK/ Feel

Slide a div from right to left using animate()

阅读更多关于 Slide a div from right to left using animate()

I want a div '.whole' to animate (slide from right to left) jQuery $('#menu').click(function() { $('.whole').toggleClass('r2'); $('#slideMenu').toggle(); }); .r2 { right: 200px } I am not able to use the function animate() properly. This should work: $('#menu').click(function(event) { event.preventDefault(); // because it is an anchor element $('.whole').animate({ right: '200px' }); $('#slideMenu').toggle(); }); But your position property should already be set in CSS or you might not get exactly what you need. Working JSFiddle To explain: the function takes a JS object of properties, like this

How to prevent this strange jQuery .animate() lag?

阅读更多关于 How to prevent this strange jQuery .animate() lag?

See demo: jsFiddle I have a simple form that is being toggled when clicking 'show' / 'cancel' Everything works fine, but if you click 'cancel' shortly after the form is revealed, there's a good 2-3 seconds lag before the animation even begins . This doesn't happen if you wait a few seconds before clicking 'cancel'. The lag occures in all tested browsers (ie, ff, chrome). 1. What could cause this lag and how can it be prevented? 2. Is there a better way of coding this sequence of animations, that might prevent any lags? HTML : <div id="newResFormWrap"> <form id="newResForm" action="" method=

jQuery Animation Speed?

阅读更多关于 jQuery Animation Speed?

Final Edit : The wall of text below can be summed up by simply asking "can I specify the speed of animations using jQuery's animate() ? All that is provided is duration ." ~~ jQuery's animate() seems to implement easing despite my use of "linear". How can I get the two boxes to stay together until the first finishes @ 250px? The second animates much faster because it has a longer distance to go. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#a').animate({left: '250px'}, 1000,

Animate a Canvas circle to draw on load

阅读更多关于 Animate a Canvas circle to draw on load

OK Hello. I've decided to start using HTML canvas for a small project I have. There's no real start yet. I'm just learning the basics of Canvas and I want to Animate a circle <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> body { margin: 0px; padding: 0px; background: #222; } </style> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <canvas id="myCanvas" width="578" height="250"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = canvas.width / 2; var y = canvas.height / 2;

jQuery, calling a callback only once after multiple animations

阅读更多关于 jQuery, calling a callback only once after multiple animations

问题 Let's say that I have several animations running at once, and I want to call a function once all of them are finished. With only one animation, it's easy; there's a callback for that. For example : $(".myclass").fadeOut(slow,mycallback); Trouble is, if my selector finds several items, the callback will be called for each of them. A workaround is not too hard; for example : <!DOCTYPE html> <html> <head> <title>Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax

Using jQuery.queue with multiple element animations?

阅读更多关于 Using jQuery.queue with multiple element animations?

jQuery queue's are very annoying - I can't get my head around it... The following function contains 4 animations which I want to happen one after the other (not at the same time). function startupAnime() { $("#header").animate({"opacity":"1"},{duration:3000, queue:"global"}); $("#header").animate({"top":"0px"},{duration:3000, queue:"global"}); &("#loader").animate({"opacity":"0"},{duration:3000, queue:"global"}); $("#background").animate({"background-position" : "300px center"},{duration:3000, queue:"global"}); } $(window).load(function() { startupAnime(); }) The two #header elements will