                        課程
                    
                        /前端開發
                        
                            /jQuery
                        
                        /jQuery基礎課程

湊個字數吧

為什么不能回復別人的。。。我想問下toggle，show\hide，slideUp\slideDown的區別，試了一下感覺沒有特別大的區別@沉淀__

qq_夜舞天狼

2016-07-10

源自：jQuery基礎課程 7-4

關注問題我要回答

306

操作

收起

1 回答

王矯情_ 回答被采納 +3 積分
2016-07-10

<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8">
????????<title></title>
????????<style?type="text/css">
????????????div?{
????????????????width:?100px;
????????????????height:?100px;
????????????}
????????????#a,?#aa?{
????????????????background-color:?palegoldenrod;
????????????}
????????????#b,?#bb?{
????????????????background-color:?palegreen;
????????????}
????????????#c,?#cc?{
????????????????background-color:?paleturquoise;
????????????}
????????????#aa,?#bb,?#cc?{
????????????????width:?50px;
????????????????height:?200px;
????????????????float:?left;
????????????}
????????????#aaa?{
????????????????clear:?both;
????????????????width:?100px;
????????????????height:?100px;
????????????????background-color:?gainsboro;
????????????}
????????</style>
????</head>
????<body>
????????<button?id="hidden">隱藏</button>
????????<button?id="show">顯示</button>
????????<button?id="one">隱藏/顯示</button>
????????<button?id="fadein">淡入</button>
????????<button?id="fadeout">淡出</button>
????????<button?id="two">淡入/淡出</button>
????????<button?id="three">特殊</button>
????????<button?id="slideup">上滑</button>
????????<button?id="slidedown">下滑</button>
????????<button?id="slidetoggle">上滑/下滑</button>
????????<button?id="custom1">自定義1</button>
????????<button?id="custom2">自定義2</button>
????????<button?id="custom3">自定義3</button>
????????<button?id="stop1">停止動畫1</button>
????????<button?id="stop2">停止動畫2</button>
????????<button?id="stop3">停止動畫3</button>
????????<div?id="a"></div>
????????<div?id="b"></div>
????????<div?id="c"></div>
????????<div?id="aa"></div>
????????<div?id="bb"></div>
????????<div?id="cc"></div>
????????<div?id="aaa">123</div>
????????<script?src="js/jquery-2.2.4.min.js"?type="text/javascript"?charset="utf-8"></script>
????????<script?type="text/javascript">
????????????//顯示和隱藏的動畫??修改的是display+width?+height
//????????????隱藏(動畫時長/過程,函數)
????????$('#hidden').click(function?()?{
????????????$('#a').hide();
????????????//設置動畫的過程:slow,normal,fast
????????????$('#b').hide('slow');
????????????//設置動畫時長
????????????$('#c').hide(6000,?function?()?{
????????????????console.log("動畫完成");
????????????})
????????});
????????//顯示
????????$('#show').click(function?()?{
????????????$('#a').show();
????????????$('#b').show('slow');
????????????$('#c').show(1000);
????????});
????????//特殊(一個按鈕控制隱藏和顯示)
????????$('#one').click(function?()?{
????????????$('#a').toggle();
????????????$('#b').toggle('slow');
????????????$('#c').toggle(1000);
????????});
????????//淡入淡出的動畫????修改的是透明度opacity+display
????????//淡入
????????$('#fadein').click(function?()?{
????????????$('#a').fadeIn();
????????????$('#b').fadeIn('slow');
????????????$('#c').fadeIn(1000);
????????});
????????//淡出
????????$('#fadeout').click(function?()?{
????????????$('#a').fadeOut();
????????????$('#b').fadeOut('slow');
????????????$('#c').fadeOut(1000);
????????});
????????//淡入/淡出
????????$('#two').click(function?()?{
????????????$('#a').fadeToggle();
????????????$('#b').fadeToggle('slow');
????????????$('#c').fadeToggle(1000);
????????});
????????//特殊,變化到指定的透明度
//????????fadeTo(時長/過程,?指定透明度,?函數)
????????$('#three').click(function?()?{
????????????$('#a').fadeTo('slow',?0.7);
????????????$('#b').fadeTo('slow',?0.1);
????????????$('#c').fadeTo('slow',?0.5);
????????})
????????//滑動出現或隱藏動畫,?修改display?+?height
????????//上滑
????????$('#slideup').click(function?()?{
????????????$('#aa').slideUp(1000);
????????????$('#bb').slideUp('slow');
????????????$('#cc').slideUp();
????????})
????????//下滑
????????$('#slidedown').click(function?()?{
????????????$('#aa').slideDown(1000);
????????????$('#bb').slideDown('slow');
????????????$('#cc').slideDown();
????????})
????????//上滑/下滑
????????$('#slidetoggle').click(function?()?{
????????????$('#aa').slideToggle(1000);
????????????$('#bb').slideToggle('slow');
????????????$('#cc').slideToggle();
????????})
????????//自定義動畫1????注:動畫的屬性應駝峰法書寫,比如修改字體font-size的值,需要把屬性名寫成fontSize
????????$('#custom1').click(function?()?{
????????????$('#aaa').animate({width:200,height:50,fontSize:100},?1000);
????????});
????????//自定義動畫2?相當于當前的增減值
????????$('#custom2').click(function?()?{
????????????$('#aaa').animate({width:'+=50',height:'-=10'},'slow');
????????});
????????//自定義動畫3,隊列動畫
????????$('#custom3').click(function?()?{
????????????$('#aaa').animate({width:200},500);
????????????$('#aaa').animate({height:200},500);
????????????$('#aaa').animate({width:100},500);
????????????$('#aaa').animate({height:100},500);
????????});
????????//停止動畫
//????????????stop(stopAll,goToEnd)
//????????????stopAll:是否清除隊列中的動畫,默認false
//????????????goToEnd:是否直接完成動畫,默認false
????????????$('#stop1').click(function?()?{
????????????????$('#aaa').stop(false,false);
????????????});
????????????$('#stop2').click(function?()?{
????????????????$('#aaa').stop(true,false);
????????????});
????????????$('#stop3').click(function?()?{
????????????????$('#aaa').stop(true,true);
????????????});
????????????
????????</script>
????</body>
</html>