jquery怎么实现淡入淡出效果?

淡入淡出效果,其实也就是显示和隐藏的效果,不过是赋予了动态效果,更加生动而已,下面我们就来看一下如何使用jquery实现淡入淡出效果吧。

jquery怎么实现淡入淡出效果?

jquery实现淡入效果使用fadeIn()、淡出效果使用fadeOut(),来回切换使用fadeToggle()。

● jQuery fadeIn()方法:用于淡入已隐藏的元素

● jQuery fadeOut()方法:用于淡出可见的元素

● jQuery fadeToggle()方法:方法可以在fadeIn()与fadeOut()方法之间进行切换

(相关课程推荐:jQuery教程

示例:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #app{
            width: 100px;
            height: 100px;
            background: skyblue;
        }
        #app:focus{
            background: green;
        }
    </style>
</head>
<body>
<script src="./jquery.min.js"></script>

<button id="btnin">淡入</button>
<button id="btnout">淡出</button>
<button id="btntaggle">切换</button>
<div id="app"></div>

<script>
$('#btnin').click(()=>{
    $('#app').fadeIn(); // 淡入
})

$('#btnout').click(()=>{
    $('#app').fadeOut(); // 淡出
})

$('#btntaggle').click(()=>{
    $('#app').fadeToggle();  // 切换
})
</script>
</body>
</html>

效果:

4.gif

本文来自jQuery答疑栏目,欢迎学习!

以上就是jquery怎么实现淡入淡出效果?的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » jQuery 答疑