jquery - JavaScript animate resizing div -

-

I'm trying to put a small animation on one page. On my side there is 2 divisas, the second of which has its content called through Ajax, so the height of the divis is different without refreshing the page. 

  & lt; Div id = "number1" style = "float: left; padding-down: 140px" & gt; Static content, 200 px or so & lt; / Div & gt; & Lt; Div id = "number2" style = "float: left" & gt; AJAX Content Here & lt; / Div & gt; & Lt; Div style = "clear: left" & gt; & Lt; / Div & gt; It basically gives me a 2 column layout, and the image nest under the left hand column does not matter if I & lt; Img src = "image" margin-top: -140px "/>

What I'm trying to do is to transmit image transition Animate the page when the page height comes thanks to the Ajax content. At present and above the image shock, I want to calm the page easily.

Is it possible? I'm not in my JavaScript, so I'm not sure how to do this. GIL Library on the site, why not Is it a way forward?

OK, I just put a very quick and dirty example .

Here's HTML:

The use of jQuery is here 

  jQuery (function ($) {var added HTML = "& lt; p class = 'added' & gt; For information about sitting AMT, Nun Punch, Magna Queen Octak Matisse, Laurem New Lobertis Mesa, AC Comodo Masta Same and now New Mechanic Tower, Vehicle or Vehicle Vehicle Station, motorcycle traffic, and lieutenant; / P & gt; Click "$" ("# Addcontent") (function (e) {$ ("# right"). Attachment (Added HTML); var truehite = $ ("#right") height (); // left Animate this column $ ("# left"). Animate ({height: right heit}, 1500);});});

and CSS: 

  #outerContainer {location: relative; border: 1px solid red; margin: 20px auto 0; hidden wavelength; width: 400px;} .col {width: 180px; display: inline; padding: 0 40px;} Left {float: left; border: 1 px solid cyan; position: relative;} # left IMG {status: full; bottom: 0; left: 0;} # right {position: full; top: 0; Left: 180px; limit: 1px solid green;} #addContent {text -align: center; Width: 100px; Margin: 20 px auto 0; Display: block;}

I've added a button to add some 'Ajax' content when you do this, it grabs the new height of the div and animates that height

I hope this will be helpful.

You can add some ease to the animation or change the speed to make it a bit more polished.


Comments

Post a Comment

Popular posts from this blog

c++ - Linux and clipboard -

-
After selecting the copies of the buffer in Linux, after the text, we can click and paste the button between the mouse. I think there is a special buffer for this, I want to use it. Programming Language: C ++ Your Library: Qt Thanks. There is just one more correct answer than Paul Dixon, which answers your needs: / P > QClipboard * clipboard = QApplication :: clipboard (); CastString Selected Text = Clipboard-> Text (QClipboard :: Selection);
Read more

Visual Studio 2005: How to speed up builds when a VSMDI is open? -

-
Using Visual Studio 2005, if I open the test in VSMFI and try to run the tests, then sometimes the projects are ready. However, they run very slow. CPU 99% waste and output window VS Shows things associated with compiling it. Is there any way to fix this? It does not make any sense. It is not necessary to upgrade that we are a viable alternative to those people who have to deal with the legacy code. Did you try to upgrade SP1? I do not know of any specific problem in this area, but this will be the first change I tried to do.
Read more

booting ubuntu from usb using virtualbox -

-
I am trying to install Ubuntu on a USB, the problem is that I do not want to repeat the boot once, I want to keep my windows, but I want to boot Ubuntu using the virtualbox and USB to the Ubuntu Want to use my hard drive, but how? The virtualbox will not recognize USB as a hard drive when installing an ISO In virtualbox, you have to create a virtual hard disk. Make a USB drive and tell the virtual box to install a virtual hard drive that you just created. EDIT: To answer some more questions: In the new Virtual Disk dialog, click the button next to the location field, click on the button Virtual Disk on Flash Drive To access, click the arrow next to Save in the Select File in the window next to Save In, and you can access your flash drive from there. I recommend setting the image to be allocated dynamically, because the size of your flash drive is not available disk space. I name the image, then select that image to install Ubuntu in the Verbill box. The virtualbox will never...
Read more