关于jQuery的slideDown()不起作用问题解决

最新推荐文章于 2022-11-29 23:31:31 发布

浪子城

最新推荐文章于 2022-11-29 23:31:31 发布

阅读量3.6k

点赞数 6

分类专栏： web前端学习文章标签： JQuery CSS JAVA HTML

本文链接：https://blog.youkuaiyun.com/weixin_44345114/article/details/100045667

版权

web前端学习专栏收录该内容

2 篇文章

订阅专栏

本文探讨了jQuery中slideDown、slideUp及slideToggle方法在图片元素上无法实现滑动效果的问题。原因是<img>标签在加载前未知其尺寸，导致浏览器无法确定动画终点。解决方案是在<img>标签或CSS中预设宽度和高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于jQuery的各种坑爹属性，这里不做详述，本文只讲述jQuery中的slideDown和slideUp和slideToggle方法不能出现上下滑动的解决办法。

方法作用的原因

这个原因也是我的推断。<img>的src属性指向图片的地址，然后读取解析显示出来。但<img>在显示图片之前并不知道图片本身的宽度和高度属性，所以在调用slideDown()方法时，浏览器并不知道图片的右边框在什么位置，所以依旧是在图片显示区域的左上角开始展开，和show方法效果一样。就像家里安装门一样，如果事先不知道门的大小，这个门又怎么能装上去。

解决办法

无论图片的宽高属性是否和浏览器显示图片的大小相同，在<img>标签中或者css中一定要定义图片的width和height属性。当浏览器获取图片得到显示区域时，就可以明确的知道图片右边框的位置，所以在显示时就能出现滑动效果。还是上边的例子，装门之前先量好门的尺寸，让厂家按照尺寸来制作，就不会出现上面的问题。

HTML代码

当去除width和height属性时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>弹出广告</title>
		<script src="../js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			function mySlideDown(){
				$("#img1").slideDown("slow");
			}
			function mySlideUp(){
				$("#img1").slideUp();
			}
			function mySlideToggle(){
				$("#img1").slideToggle(1000,function(){
					alert("切换成功");
				})
			}
		</script>
		<style type="text/css">
			#img1{
				/*width: 600px;
				height:400px;*/
				display: none;
			}
		</style>
	</head>
	<body>
		<div>
			<button type="button" onclick="mySlideDown()">slideDown</button>
			<button type="button" onclick="mySlideUp()">slideUp</button>
			<button type="button" onclick="mySlideToggle()">slideToggle</button>
		</div>
		<img src="../img/001.jpg" id="img1" />
	</body>
</html>

出现的效果如下，红色边框是图片最终展示的大小。此图是从slideDown按钮下方的一个点展开的过程。

当把上面的width和height属性加上后出现的效果如下：
在这里插入图片描述
以上是对jQuery的slideDown方法问题的简介。第一次写博客，这点字写了老长时间。如果更好的见解，欢迎下方评论。