jquery-animate

I was able to animate my <div> ( more info ) from bottom:-100px to bottom:0px . Now I'd like to have different speeds: Start a bit slower at the beginning of the animation and then get faster by the end of the animation. This is how it looks: $('#bannerFijo').animate({ bottom: '-15px' }, 1000, function() { $('#bannerFijo').animate({ bottom: '0px' }, 100); }); But I'm sure there must be another way so that the speed changes progressively. -edit- Animated version two: $('#bannerFijo').animate({ bottom: '0px' }, 1200, function() { $('#bannerFijo').animate({ bottom: '-15px' }, 300,function() { $('

I was wondering if anyone could help me out, or point me in the right direction. I'm looking for a snippet of jquery that will automatically change the background image of a div every say 5 seconds or so. My initial bg image is set in css, but i'm not sure how to create the function to make it swap between an array of images? I have 5 images: bg-1.jpg, bg-2.jpg, bg-3.jpg, bg-4.jpg, bg-5.jpg. Currently my div is set to bg-1.jpg. <div id="page_bg"></div> Don't really have any code to show, but hopefully someone can help me out :) Something like this should do the trick? jQuery( function( $ ) {

I'm trying to have a function that does setTimeout, then changes the innerHTML: <script type="text/javascript"> $(document).ready(function(){ setTimeout(function(){ document.getElementById("middlecolor").innerHTML='new text new text'; }, 1000); }); </script> Question : How could I animate the new text that appears, i.e. line by line as opposed to being written all at once? Thanks for any suggestions!! Line-by-line is a bit tricky, but possible . var ps = document.getElementById("text").children; var i = 0; var $p = $(ps[i]); setTimeout(function newline(){ $p.css("height", function(index, h){ h

How can I achieve height animation in reverse? Instead of the typical animation starting from the top and working its way down, how can I have it start the animation from the bottom of the element and work its way up towards the top of the element? The event is triggered by a#link-1 , the animation takes place in div#line-1 . This is my code: It doesn't appear to be working. :-/ HTML <div id="pageContainer"> <div id="line-1"></div> <a id="link-1" title="" href="#">Link 1</a> </div><!-- end #pageContainer --> CSS #pageContainer{ position: relative; margin: 0px 0px 200px 0px; min-height: 748px;

I have a little Problem using jQuery.animate with firefox: when i animate the height of a container with some background image, the background starts to flicker on firefox only - all other browsers (even ie) show a smooth animation. a reduced code snippet that shows what i do: <div style="background-image:url(image.jpg);background-position:50% 50%;height:200px;" onmouseover="jQuery(this).animate({height:400});"></div> I would greatly appreciate your help. Out of interest, what happens if you wrap that in another DIV and animate that, e.g. <div style="background-position:50% 50%;height:200px;"

quick question about the the animate property in jquery, Is it possible to animate I cant figure out how? here is my html <nav> <a href="">Page 1</a> <a href="">Page 2</a> <a href="">Page 3</a> <a href="">Page 4</a> <a href="">Page 5</a> <a href="">Page 6</a> </nav> <div style="height:9000px;"></div> and javascript: $(function(){ $('nav').data('size','big'); }); $(window).scroll(function(){ var $nav = $('nav'); var $a = $('nav > a'); if ($('body').scrollTop() > 0) { if ($nav.data('size') == 'big') { $nav.data('size','small').stop().animate({ height:'40px', line-height:'40px' }, 300); $a.data(

I'm using a simple easing animation given here using JQUERY EASING PLUGIN i.e.easing a div from left:200 to left:0 and back.(last example on above page) I have multiple divs in a container div.and what i want to do is animate the 4 divs in following way : 1] Suppose if i have two divs, div1 and div2. when div1 is animated,and the animation is in progress the div2 animation should start.eg: when div1 is moving from left=200 to left=0 , the div2 animation should start when div1 is at left = 100. Edit (Note:the number of divs are variable) ....... When the current animation is in progress,and

I'm having an issue with my jQuery slideshow and I can't seem to figure it out. During the transition of images the slideshow will flash white instead of nicely fading into the next picture. I believe it has something to do with the following lines of code: $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow'); Clicking the previous and next buttons cause the same issue. Here's a jsFiddle of the slideshow. Thanks! you have to show the next image before you start fading out the current one, also you have to do this at the same time, just replace the fadeIn