jQuery的slideUp功能对我来说工作不正常

请看看this fiddle。jQuery的slideUp功能对我来说工作不正常

我的目标是有一个按钮，通过按钮远程滑动图像，但它变得很小。

有人知道这个的原因吗？

2012-02-28 imjp

您需要将图像放置在一个容器中，其中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

来源

2012-02-28 13:47:01

谢谢你Rory！快速的问题：我的网站上的想法是，当我按下按钮时，图像通过绝对位置经过我的按钮。当鼠标离开图像悬停时，如何让图像消失，而不必再次单击该按钮？ – imjp 2012-02-28 13:55:33

@imjp您需要在'mouseleave（）'事件的图像上调用'slideUp（）'。 – 2012-02-28 13:57:00

由于您只指定了height而不是width，图像元素试图保持其宽高比。

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

来源

2012-02-28 13:46:45

这仍然会导致因为它向上滑动的图像宽高比失真。 – 2012-02-28 13:49:33

的方法的slideToggle改变元件的高度。但我认为，因为您滑动直接切换图像标签，宽度随高度变化以保持比例。

尝试显式设置您的图像的宽度以保持宽度。

DEMO

来源

2012-02-28 13:47:22

jQuery的slideUp功能对我来说工作不正常

回答

相关问题