Question

Hello People我发现了一个奇怪的问题。

div'floor'的初始css

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

Html内容： <div id="map" class="floors" ></div>

Jquery animate

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

}）

如上所示，最初我在一个小窗口leaflet map中加载floor，点击按钮floor后尺寸增加...然后再次将地图加载到一个大的内部大小的窗口（地板）...它的工作正常...但问题是在jquery动画之后我必须change screen size manually by dragging browser window width or height只有地图将加载完全否则地图将加载仅在小的winodw大小（initla大小窗口大小））如何解决这个问题？在加载静态图像时，地图bcos没有任何问题我有同样的问题，有没有办法在动画函数后刷新div（floor）？

完全相同的问题...请检查

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

感谢@Rvervuurt提供更新的图片，是的，这是我面临的确切问题......

Exact Issue as shown in pic

Answer 1

这是你想要的吗？

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

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

    }
  });


});

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

我知道，它“跳了一下”，但至少它正在起作用或进一步调查......

请尝试告诉我，如果这是你想要达到的目的。

仅当窗口大小最小化时才加载Jquery动画（小提琴已更新）

1 个答案: