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

What is expire header and how to achive them in ASP.NET and PHP? -

-
I have examined the performance statistics of my website today. I have received a warning (or error may occur) that is given below Add Terminal Headers Here are 15 static components without a 15-futures end date * (no end) Http://www.example.com/video/css/global.css * (no time limit) http://www.example.com/video/js/global.js * (no expiration ) Http: //www.example.com/video/images/main-bg.png what it means and how to achieve it both in PHP and ASP.Net. I am on a shared hosting server, so please tell me some ways to use the code, because I can not make any modifications at the end of the server. If I expire the header, then there is no chance that if I make changes to the CSS, then the user will not be able to remove them immediately because CSS and other files have a fixed time limit (1 month, week ) Are cached for. Is Is there any harm to using PHP? $ time = time () + 3 * 24 * 60 * 60; // 3 day headings ('End:'. GMDAT ('D, D MYH: i: s \ g \ m \ t',
Read more

sql server - How can I determine which of my SQL 2005 statistics are unused? -

-
After a few years, one of my biggest databases has deposited 73 figures out of its largest tables. With Indexes, I can run many types of reports and queries, how often / heavily specific indexes are used. What is an equivalent for data? We are running SQL 2005. To make statistics automatically managed and honest, I would like to "update statistics", "create statistics" and There is no information about any management except "drop statistics" orders. In theory, UPDATE should handle the addition and removal of statistical data. In addition, I've never heard about the amount of storage or storage taking in large amounts, so I'm not sure whether there is any reason for the alarm or not. If you are seeing a potential problem, then I would suggest running an update before, if it does not clean it, it is leaving and then it appears to be safe operation (because it is the only query optimizer Is for). I will not leave "left" in the
Read more