toggle() 切換顯示或是隱藏

toggle() 切換顯示或是隱藏

toggle() 是jQuery中基本的動畫函數，使用自定義效果來顯示或隱藏匹配的元素。
$("#id").toggle( effect , options , duration , complete )，
如下 : $("#myimg").toggle(effectType, 1000,function() { } ); ;
effect String 一个字符串，指示要使用哪一种特效 。
options Object 特效具体的设置和 easing 。
duration Number 或 String 一个字符串或一个数字，指定动画将运行多久。
complete Function() 一旦动画完成时要调用的函数。

<center><div id="buttom_id"><input type="button" class="Bittom"value="blind" /><input type="button" class="Bittom" value="bounce" /><input type="button" class="Bittom" value="clip" /><input type="button" class="Bittom" value="drop" /><input type="button" class="Bittom" value="explode" /><input type="button" class="Bittom" value="fold" /><br /><input type="button" class="Bittom" value="highlight" /><input type="button" class="Bittom" value="puff" /><input type="button" class="Bittom" value="pulsate" /><input type="button" class="Bittom" value="scale" /><input type="button" class="Bittom" value="shake" /><input type="button" class="Bittom" value="size"><input type="button" class="Bittom" value="slide" /><br /><img id="myimg" width="40%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMa3fbcschI2vxmf4RGwxdn3jfM2N56-Ik46Oh3xFBQ-S0JHRjJvojLfpjKu2dVCmpHmg2Hjk2KEK-4-iQReohtaHv3sL_O2YMX1sGQdEvFlXU4I3RicLmJJ1Ub2Pi1pZ3jY2U3HpCMql/s1024/ck20180728.jpg" /></center></div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript"> $("#buttom_id input").click (function () { var effectType = $(this).val(); $("#buttom_id").toggle(effectType, 500); window.setTimeout( function() { $("#buttom_id").toggle(effectType, 500); }, 1000 ); }); </script>

00

<style>#Mm {font-size: 20px ;width:100%;color: black ;background-color:linen ;text-align: center;vertical-align: middle;border: 1px solid black;cursor:pointer; } #Dd{font-size: 20px ;width:98%;color: black ;background-color:linen ;border: 1px solid black;display: none;padding:5px; } </style> <div id="Mm">閱讀更多....</div><div id="Dd">羅6:4-6 所以我們藉著洗禮歸入死、和他一同埋葬．原是叫我們一舉一動有新生的樣式、像基督藉著父的榮耀、從死裏復活一樣。6:5 我們若在他死的形狀上與他聯合、也要在他復活的形狀上與他聯合．6:6 因為知道我們的舊人、和他同釘十字架、使罪身滅絕、叫我們不再作罪的奴僕。</div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script><script type="text/javascript"> $("#Mm").click(function(){ $("#Dd").toggle(500); }); </script>

00

toggle() 切換顯示或是隱藏

toggle() 切換顯示或是隱藏

toggle() 是jQuery中基本的動畫函數，使用自定義效果來顯示或隱藏匹配的元素。
$("#id").toggle( effect , options , duration , complete )，
如下 : $("#myimg").toggle(effectType, 1000,function() { } ); ;
effect String 一个字符串，指示要使用哪一种特效 。
options Object 特效具体的设置和 easing 。
duration Number 或 String 一个字符串或一个数字，指定动画将运行多久。
complete Function() 一旦动画完成时要调用的函数。

<center> <div id="buttom_id"> <input type="button" class="Bittom"value="blind" /> <input type="button" class="Bittom" value="bounce" /> <input type="button" class="Bittom" value="clip" /> <input type="button" class="Bittom" value="drop" /> <input type="button" class="Bittom" value="explode" /> <input type="button" class="Bittom" value="fold" /> <br /> <input type="button" class="Bittom" value="highlight" /> <input type="button" class="Bittom" value="puff" /> <input type="button" class="Bittom" value="pulsate" /> <input type="button" class="Bittom" value="scale" /> <input type="button" class="Bittom" value="shake" /> <input type="button" class="Bittom" value="size"> <input type="button" class="Bittom" value="slide" /> <br /> <img id="myimg" width="40%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMa3fbcschI2vxmf4RGwxdn3jfM2N56-Ik46Oh3xFBQ-S0JHRjJvojLfpjKu2dVCmpHmg2Hjk2KEK-4-iQReohtaHv3sL_O2YMX1sGQdEvFlXU4I3RicLmJJ1Ub2Pi1pZ3jY2U3HpCMql/s1024/ck20180728.jpg" /> </center> </div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript"> $("#buttom_id input").click (function () { var effectType = $(this).val(); $("#buttom_id").toggle(effectType, 500); window.setTimeout( function() { $("#buttom_id").toggle(effectType, 500); }, 1000 ); }); </script>

00

<style> #Mm {font-size: 20px ;width:100%;color: black ;background-color:linen ;text-align: center;vertical-align: middle;border: 1px solid black;cursor:pointer; } #Dd{font-size: 20px ;width:98%;color: black ;background-color:linen ;border: 1px solid black;display: none;padding:5px; } </style> <div id="Mm">閱讀更多....</div> <div id="Dd">羅6:4-6 所以我們藉著洗禮歸入死、和他一同埋葬．原是叫我們一舉一動有新生的樣式、像基督藉著父的榮耀、從死裏復活一樣。6:5 我們若在他死的形狀上與他聯合、也要在他復活的形狀上與他聯合．6:6 因為知道我們的舊人、和他同釘十字架、使罪身滅絕、叫我們不再作罪的奴僕。</div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> $("#Mm").click(function(){ $("#Dd").toggle(500); }); </script>

00