使用jQuery完成按键点击实现图片或者块级元素的显示、隐藏、淡入、淡出以及半透明动画效果
时间: 2024-02-02 18:03:17 浏览: 33
以下是使用jQuery完成按键点击实现图片或者块级元素的显示、隐藏、淡入、淡出以及半透明动画效果的例子:
1. 显示和隐藏图片
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("img").hide();
});
$("#show").click(function(){
$("img").show();
});
});
</script>
</head>
<body>
<button id="hide">隐藏图片</button>
<button id="show">显示图片</button>
<br><br>
<img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="鲜花" width="100" height="100">
</body>
</html>
```
2. 淡入和淡出图片
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeOut").click(function(){
$("img").fadeOut();
});
$("#fadeIn").click(function(){
$("img").fadeIn();
});
});
</script>
</head>
<body>
<button id="fadeOut">淡出图片</button>
<button id="fadeIn">淡入图片</button>
<br><br>
<img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="鲜花" width="100" height="100">
</body>
</html>
```
3. 半透明图片
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#opacity").click(function(){
$("img").css("opacity", "0.5");
});
});
</script>
</head>
<body>
<button id="opacity">半透明图片</button>
<br><br>
<img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="鲜花" width="100" height="100">
</body>
</html>
```
4. 显示和隐藏块级元素
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<button id="hide">隐藏段落</button>
<button id="show">显示段落</button>
<br><br>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
```
5. 淡入和淡出块级元素
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeOut").click(function(){
$("p").fadeOut();
});
$("#fadeIn").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<button id="fadeOut">淡出段落</button>
<button id="fadeIn">淡入段落</button>
<br><br>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
```