jquery-animate

问题 I have a script on jsfiddle: http://jsfiddle.net/kX7b6/ Nothing happens on hover On hover I want the green box to overlap the red box with a negative margin -50px. Nothing happens. The animation works, but not margin Just to show that the animation itself is working i added a opacity function to the animation. margin-top is set to 0px inline as far as I can see. 回答1: You had MarginTop instead of marginTop http://jsfiddle.net/kX7b6/1/ It is also very buggy if you leave mid animation, here is

问题 I want to animate multiple elements with jQuery one after another, so $("div").each(function(i){ $(this).delay(i*1000).animate({left: "+=200"}, {duration: 3000}); }); http://jsfiddle.net/eP2C3/1/ And now I need them to fadeOut while moving. If duration is 3000ms I add 2500ms delay and fade it out in 500ms. $("div").each(function(i){ $(this).animate({left: "+=200"}, {duration: 3000, queue: false}) .delay(2500) .animate({opacity: 0}, {duration: 500}); }); http://jsfiddle.net/eP2C3/ But if I

问题 I'm using the following JQUERY to attach an even to a link in the header, which essentially scrolls to the bottom of the page: $('#comment-count-btn').click(function(){ $('html,body').scrollTo('#comment-wrapper', 500); }); Problem is, that it scrolls all the way to the bottom of the page (which is correct), but then when I try to scroll up a tad, the scroll bar jumps, as if it's locked for a little bit. Any ideas? 回答1: Try adding return false; in the end of click() function. Also, try

问题 http://jsfiddle.net/leonwho/98mD2/ HTML <div id="account-setup-guide"> <div id="account_tour_info"> <ul> <li class="setup_complete"><strong>1</strong> Sync!</li> </ul> </div> </div> CSS #account-setup-guide { position: relative; margin: 30px 30px 20px 20px; padding: 20px; width: auto; border: 5px solid orange; background: orange; } jQuery var animateThis = function() { console.log('run animateThis'); $('#account-setup-guide').stop().animate({backgroundColor: '#ffffff'}, 500); $('#account

问题 I've run into a bit of an issue with the step function. I have to call a complex function within the STEP function, but am trying to limit the number of calls to improve performance. To make things more complicated, I'm animating 2 properties. obj.animate({'width':newWidth+px,'height':newHeight+px}, {duration:time,queue:false,step:function(now,fx){ complicatedFunction(); }}); The function accounts for the positions/dimensions of the OBJ, then calculates new dimensions and positions for

问题 Is it possible to call some function in .animate event? I have to call resize() function for every resize event on some div. For an example, I call function on window resize event: $(window).resize(resize); But now I wish to call this function inside animate event(every changed pixel(like .resize does)). selector['el']['box'].animate({width:selector['el']['box'].width() - 250}, 500); selector['el']['box'].promise().done(function() {resize();}); But this is not what I want, because I wish

问题 I haven't found any answer to this in a reasonable amount of time on this forum. So here I ask. I'm trying to animate a text from left to right with the ease 'swing', but at the same time, make it fade in, then fade out before the end. I found a solution in three steps but I find it very hard to maintain and modify. With this technique it is also impossible to use the swing easing. What I do is: animate left +=10 and opacity from 0 to 0.8 in the same animation for 1 sec. animate left +=20 for

问题 I've been fighting against IE8's compatibility mode all day and I'm about to chuck a brick at it. I have some code, which uses jquery 1.2 (yes it's old - can't change that), to search for some records in our web app. The results of the search can be clicked on to view the contents of the record (by using .animate() it opens a space under the row and creates another TR underneath and inserts HTML data from a json feed). In IE8, clicking on a result to view the content forces it to reload in

问题 Greetings, I am changing the width of an element which serves as a bar , and that works. However I can't make it so that it animates it in the opposite direction. I tried putting - in front of bar_width but to no avail. Width will be dynamically calculated it's just that I want the direction to go to the left rather than to the right like so <------- not -----------> var bar_width=$(this).css('width') ; $(this).css('width', '0').animate({ width: bar_width }, queue:false,duration:3500,easing:

问题 I have an <object> with an id of 'objectID'. I can modify its position with .css : $('#objectID').css({'top': "+=200px"}); But when I use .animate it won't work: $('#objectID').animate({'top': "+=100px"}, 1000); or $('#objectID').animate({top: "10"}, slow); Or any other variation, which works on divs. Is there a limitation to animating object elements? 回答1: Since the <object> tag is not supported you can hack out your own animation like this: var obj = $('#objectID'); var speed = 50; var