jQuery slideUp函数对我来说无法正常工作

Question

请查看this fiddle。

我的目标是让按钮通过按钮远程向上滑动图像，但它会变小。

任何人都知道原因吗？

Answer 1

图片元素正在尝试保持其宽高比，因为您只指定了height而不是width。

添加width="200px"可以解决您的问题。你会发现一个更新的小提琴here。

Answer 2

您需要将图像放入设置了overflow: hidden的容器中，以便浏览器不会调整图像大小并导致宽高比失真。

HTML

<div class="le_map_container"> <!-- overflow: hidden on this element -->
    <img src="http://bethhaim.spin-demo.com/wp-content/files_flutter/1330095469Untitled-5.jpg" height="200" class="le_map"/>
</div>

的jQuery

$('.tour_map').click(function() {        
    $(".le_map_container").slideToggle();
}); 

Example fiddle

Answer 3

slideToggle方法更改元素的高度。但我认为因为你直接滑动图像标签，宽度会随着高度而改变以保持比例。

尝试明确设置图像宽度的宽度。

<强> DEMO