javascript功能過渡
[英]Transition on javascript funtion
問題描述
是否可以在JavaScript函數（例如CSS過渡）中添加過渡？ 在摘錄中，單擊按鈕時，這將是對背景更改顏色的褪色效果。
$("#btn1").click(function() { $('body').removeClass(); $('body').addClass('class1'); }); $("#btn2").click(function() { $('body').removeClass(); $('body').addClass('class2'); }); $("#btn3").click(function() { $('body').removeClass(); $('body').addClass('class3'); });
body {align-items: center; justify-content: center; text-align: center; } body.class1 { background-color: red; } body.class2 { background-color: green; } body.class3 { background-color:powderblue; } button {padding: 15px 32px; margin: 80px 10px; font-size: 16px; border-radius: 12px; border: 2px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body class="class1"> <button id="btn1">RED</button> <button id="btn2">GREEN</button> <button id="btn3">BLUE</button> </body>
2 個解決方案
解決方案1
0 2017-11-04 20:42:03
嘗試這個
<!DOCTYPE html> <html> <head> <style> #myDIV { border: 1px solid black; background-color: lightblue; width: 270px; height: 200px; overflow: auto; } #myDIV:hover { background-color: coral; width: 570px; height: 500px; padding: 100px; border-radius: 50px; } </style> </head> <body> <div id="myDIV"> <h1>myDIV</h1> </div> <script> document.getElementById("myDIV").style.WebkitTransition = "all 2s"; // Code for Safari 3.1 to 6.0 document.getElementById("myDIV").style.transition = "all 2s"; // Standard syntax </script> </body> </html>
解決方案2
0 已采納 2017-11-04 20:45:26
像這樣在CSS本身中添加過渡。
$("#btn1").click(function() { $('body').removeClass(); $('body').addClass('class1'); }); $("#btn2").click(function() { $('body').removeClass(); $('body').addClass('class2'); }); $("#btn3").click(function() { $('body').removeClass(); $('body').addClass('class3'); });
body { align-items: center; justify-content: center; text-align: center; } body.class1 { background-color: red; -webkit-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; } body.class2 { background-color: green; -webkit-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; } body.class3 { background-color: powderblue; -webkit-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; } button { padding: 15px 32px; margin: 80px 10px; font-size: 16px; border-radius: 12px; border: 2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body class="class1"> <button id="btn1">RED</button> <button id="btn2">GREEN</button> <button id="btn3">BLUE</button> </body>
如果只想使用jquery only則可以使用它.addClass( className [, duration ] [, easing ] [, complete ] )
注意：但是您必須添加jquery-ui.js文件才能使其正常工作。
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$("#btn1").click(function() { $('body').removeClass(); $('body').addClass('class1',1000, "easeOutBounce" ); }); $("#btn2").click(function() { $('body').removeClass(); $('body').addClass('class2',1000, "easeOutBounce" ); }); $("#btn3").click(function() { $('body').removeClass(); $('body').addClass('class3',1000, "easeOutBounce" ); });
body {align-items: center; justify-content: center; text-align: center; } body.class1 { background-color: red; } body.class2 { background-color: green; } body.class3 { background-color:powderblue; } button {padding: 15px 32px; margin: 80px 10px; font-size: 16px; border-radius: 12px; border: 2px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <body class="class1"> <button id="btn1">RED</button> <button id="btn2">GREEN</button> <button id="btn3">BLUE</button> </body>
Javascript 循環功能(i)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.