jquery控制元素的淡入淡出切换

简介:     doctype html> Jquery $(function(){ $('#btn').click(function(){ $('#bk').

 

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery</title>


<script src="jquery.js" type="text/javascript"></script>
<script>
$(function(){
    $('#btn').click(function(){
        $('#bk').fadeIn(3000);
    })
    $('#btn2').click(function(){
        $('#bk').fadeOut(3000);
    })
    $('#bk').mouseover(function(){   //此函数可使元素先淡入后淡出
        $('#bk').fadeToggle(3000);
        $('#bk').fadeToggle(3000);
        $('#bk').fadeTo(3000,0.6);     //设置元素的不透明度
    })
})
</script>
</head>
<body>
<h3 id='bk'>我是被控制的对象</h3>
<input type='button' id='btn' value='带入' />
<input type='button' id='btn2' value='淡出' />
<input type='button' id='btn3' value='切换' />
</body>
</html>

 

相关文章
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
127 11
|
JavaScript
jQuery 效果 - 淡入淡出
jQuery 效果 - 淡入淡出
119 6
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
107 2
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
124 6
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
186 2
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
101 1
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
203 5
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
92 0
|
JavaScript
JQuery——动态添加元素导致点击事件失效
JQuery——动态添加元素导致点击事件失效
175 0
|
JavaScript
jQuery 效果 - 淡入淡出
jQuery 效果 - 淡入淡出
101 0