显示于隐藏方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="../jQuery3.6.0.js"></script>
<script>
$(function() {
$("#anniu").click(function() {
if ($("#anniu").val() == "显示") {
$("#img1").show("slow", function() {
$("#img1").css({
"border": "1px solid red",
"background-color": "red"
});
});
$("#anniu").val("隐藏");
} else {
$("#img1").hide("slow");
$("#anniu").val("显示")
}
});
});
</script>
</head>
<body>
<img style="display: none;" src="../img/3.png" id="img1" />
<br/>
<input type="button" value="显示" id="anniu" />
</body>
</html>
多个参数时可以用“{}”包起来,用“,”隔开
隐藏与显示之间切换:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 12px;
}
ul {
list-style: none;
}
ul li {
height: 30px;
width: 100px;
text-align: center;
border: 1px solid paleturquoise;
border-bottom: none;
}
ul li a {
text-decoration: none;
}
ul li.img1 {
background-image: url(../img/up.png);
background-repeat: no-repeat;
border-top: 1px solid paleturquoise;
border-right: 0;
}
ul li.down{
background-image: url(../img/end.png);
}
</style>
<script src="../jQuery3.6.0.js"></script>
<script>
$(function(){
$(".img1").click(function(){
$("#div1 li:gt(5):not(:last)").fadeToggle();
$(".img1").toggleClass("down");
});
});
</script>
</head>
<body id="div1">
<ul>
<li><a href="#">9快9包邮</a></li>
<li><a href="#">大货精选</a></li>
<li><a href="#">海外海购</a></li>
<li><a href="#">大厂直销</a></li>
<li><a href="#">超值抢购</a></li>
<li><a href="#">家电办公</a></li>
<li><a href="#">母婴用品</a></li>
<li><a href="#">护肤美容</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">户外运动</a></li>
<li><a href="#">家具家电</a></li>
<li class="img1"></li>
</ul>
</body>
</html>
fadeToggle方法会检测是否隐藏或显示,来回之间互相切换
缓慢出现和缓慢隐藏:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="../jQuery3.6.0.js"></script>
<script>
$(function() {
$("#anniu").click(function() {
if ($("#anniu").val() == "显示") {
$("#img1").fadeIn("slow", function() {
$("#img1").css({
"border": "1px solid red",
"background-color": "red"
});
});
$("#anniu").val("隐藏");
} else {
$("#img1").fadeOut("slow");
$("#anniu").val("显示")
}
});
});
</script>
</head>
<body>
<img style="display: none;" src="../img/3.png" id="img1" />
<br/>
<input type="button" value="显示" id="anniu" />
</body>
</html>
通过下拉框改变透明度:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="../jQuery3.6.0.js"></script>
<script>
$(function(){
$("#sel").change(function(){
var date=$("#sel").val();
$("#img").fadeTo(1000,date);
});
});
</script>
</head>
<body>
<img src="../img/ys.png" id="img"/>
<select id="sel">
<option value="0.2">0.2</option>
<option value="0.4">0.4</option>
<option value="0.6">0.6</option>
<option value="0.8">0.8</option>
<option value="1" selected="selected">1</option>
</select>
</body>
</html>
鼠标悬浮、点击:显示、隐藏:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
#ul1 {
list-style: none;
}
#ul1 li {
width: 120px;
float: left;
margin-left: 20px;
}
#ul1 li ul li {
width: 100px;
float: none;
list-style: none;
border: 1px solid red;
display: none;
}
</style>
<script src="../jQuery3.6.0.js"></script>
<script>
$(function() {
//点击显示、隐藏
// $("#rmyy").click(function(){
// $("#rmyy ul li").stop(true,false).slideToggle(250);
// });
$("#rmyy").hover(function() {
$("#rmyy ul li").slideDown(250);
}, function() {
$("#rmyy ul li").stop(true, false).slideUp(250);
});
});
</script>
</head>
<body>
<ul id="ul1">
<li id="rmyy"><a href="#">热门音乐</a>
<ul>
<li><a href="#">江南stal</a></li>
<li>错错错</li>
<li>御剑飞行</li>
</ul>
</li>
<li>我的音乐</li>
<li>联系商家</li>
<li>我的VIP</li>
</ul>
</body>
</html>
自定义动画:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="../jQuery3.6.0.js"></script>
<script>
$(function() {
$("#img1").click(function() {
$(this).animate({
width: "500px"
}, "slow");
$(this).animate({
height: "200px"
}, "slow");
$(this).animate({
width: "200px"
}, "slow");
$(this).animate({
height: "50px"
}, "slow");
});
});
</script>
</head>
<body id="div1">
<img src="../img/3.png" id="img1" />
</body>
</html>
利用animate方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="../jQuery3.6.0.js"></script>
<script>
$(function() {
$("#img1").click(function() {
$(this).animate({left:"+=100px",top:"+=100px",opacity:0.5},3000);
});
});
</script>
<style>
#img1{
position: absolute;
}
</style>
</head>
<body id="div1">
<img src="../img/3.png" id="img1" />
</body>
</html>
移动位置前要将位置改为绝对定位
position: absolute;