CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Your Friend
Your Friend

Reputation: 1149

Jquery animation loads only when window size is minimised (Fiddle updated)

Hello People I found a strange problem.

initial css of div 'floors'

.floors { 
height: 195.28px; 
width:241.89px;
margin-top: 30%;
}

Html Content: <div id="map" class="floors" ></div>

Jquery animate

$(".somediv").click(function(){
 $( ".main_floors" ).animate({
        width: "+=600px",
        height:'+=400px',
        marginLeft: "30%",
        fontSize: "3em",
      }, 1500 );

})

as shown above,initially I am loading leaflet map in a small window floor ,after a click of a button floor size increases ...then again map should load inside a big sized window(floor) ... its working fine...but the problem is after jquery animate i have to change screen size manually by dragging browser window width or height only then map will load completly else map will load only as in small winodw size (initla size window size) how to fix this?It could not any issues from map bcos i had same problem while loading static image,is there a way to refresh div(floor) after animate function?

Fiddle exactly same issue ...please check

https://jsfiddle.net/dh2p91o5/4/

Thanks @Rvervuurt for an updated image, yes that's the exact problem I am facing...

Exact Issue as shown in pic

Upvotes: 2

Views: 84

Answers (1)

Haudegen
Haudegen

Reputation: 498

Is this, what you are looking for?

$( "#run").click(function() {

  $( "#map" ).animate({
            width: "+=300px",
            height:'+=300px',
            marginLeft: "30%",
            position: "absolute",
  }, {
    duration: 1500,
    complete: function() {
        map._onResize(); 

    }
  });


});

https://jsfiddle.net/dh2p91o5/9/

I know, it "jumps" a little, but at least it is working or a point to investigate furthermore ...

Please try and tell me, if this is what you wanted to achive.

Upvotes: 1

Related Questions