CODEWITHSUNDEEP
javascriptjqueryhtmlcss
1252748
1252748

Reputation: 15372

prevent text from reformatting as div is expanding

I am using jquery to put some HTML into a div. After I do so, I would like to expand the div so that an element to its right is moved over as its width increases. Is there anyway to prevent the text/HTML in the div that I'm expanding from constantly reformatting itself as the width grows. Just so it looks as though it is being uncovered, not constantly jumbling?

$(document).ready(function(){
  $('body').on('click', '#btn', function(){
    var contents = $('#contentDiv').html(); 
        $('#div2').append(contents).animate({'width':'100px'}, 1000);
  });  
});

http://jsbin.com/oqosiz/1/edit

Upvotes: 4

Views: 112

Answers (1)

Austin Greco
Austin Greco

Reputation: 33544

add an inner div with width set and overflow: hidden;

then animate the width of the div around the inner div:

http://jsbin.com/oqosiz/2/edit

Upvotes: 3

Related Questions