jquery-animate

I'm trying to animate something using jQuery. UPDATE I have it working the way I want it. This is the jQuery: $(document).ready(function() { // go chat button $('#go-chat input').click(function() { $('#search, #go-chat').animate({width: '0px'}, 1000, function() { $(this).hide(); $('#login, #go-search').animate({width: '573px'}, 1000, function() { $(this).show(); } ); } ); }); $('#go-search input').click(function() { $('#login, #go-search').animate({width: '0px'}, 1000, function() { $(this).hide(); $('#search, #go-chat').animate({width: '573px'}, 1000, function() { $(this).show(); } ); } ); });

Evening all - Whats the best way to access an image's height and width dynamically . I want to add 20% to an images width and height and animate when the surrounding div is hovered, I guess I need to use 'this', but not sure how to access the image. Any help greatfully received. Cheers Paul You could do something like this, using .height() and .width() with function arguments: $("img").hover(function() { $(this).height(function(i, h) { return h * 1.2; }) .width(function(i, w) { return w * 1.2; }); }, function() { $(this).height(function(i, h) { return h / 1.2; }) .width(function(i, w) { return

A simple question: Why can I do this var start = function() { $('#element').animate({}, 5000, 'linear', start); } but not this function start() { $('#element').animate({}, 5000, 'linear', start()); } ? The first works perfectly, restarting the animation after it completes. The second simply causes an infinite loop. Either use function start() { $('#element').animate({}, 5000, 'linear', start); } or function start() { $('#element').animate({}, 5000, 'linear', function(){ start(); }); } second case is useful if you want to actually pass some arguments to start.. it's because in the first one you

How can I use CSS3 transitions (or any other means) to make a jQuery Sortable act more like the list re-ordering in iOS, where list items smoothly animate while dragging, so items scurry out of the way as you drag? [editing to turn this into an FAQ and save time for anyone else who wants to figure this out] https://gist.github.com/801570 shows how to smoothly animate dragging using jQuery Sortable . Items scurry out of the way as you drag. It uses CSS3 Transitions and the effect was exactly what I am looking for. Very cool. Here's the code: JSFIDDLE: http://jsfiddle.net/LTWMp/ HTML: <style

how do I determine the positions in percentages? $(document).ready(function(){ $("#button").toggle(function(){ $("#slide").animate({top:-100%},1000); },function(){ $("#slide").animate({top:0%},1000); }); }); Please suggest. $(document).ready(function(){ $("#button").toggle(function(){ $("#slide").animate({top:'-100%'},1000); },function(){ $("#slide").animate({top:'0%'},1000); }); }); Add quotes. (I used single quotes, but js doesn't care if it is ' or ") 来源： https://stackoverflow.com/questions/11015399/jquery-animate-position-in-percentage

I have two divs and two buttons: <div id="container"> <div id="items"></div> </div> <div id="up"></div> <div id="down"></div> How to continuously scroll '#items' until user releases the button? I tried using jquery mousedown event and animate function but couldn't make it to work. $("#up").mousedown(function(){ $("#items").animate({"top": "+=10px"}, "fast"); }) The code above moves the div just once. I want to achieve continuous animation until the button is released. Thanks for your help! Please, try this: var scrolling = false; jQuery(function($){ $("#up").mousedown(function(){ scrolling =

As it stands there us a difference between the two and I want them to run at the same time. Here is the code: $(selector1).animate({ height: '670' }, 2000, function() { // Animation complete. }); $(selector2).animate({ top: '670' }, 2000, function() { // Animation complete. });​ andlrc Using queue:false . You can see the full docs here. $(selector1).animate({ height: '670' }, { duration: 2000, queue: false, complete: function() { /* Animation complete */ } }); $(selector2).animate({ top: '670' }, { duration: 2000, queue: false, complete: function() { /* Animation complete */ } }); Docs: