fx.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1,initial-scale=1,user-scalable=0">
  6. <link rel="stylesheet" href="../test.css">
  7. <title>Zepto fx functional test</title>
  8. <script src="../../src/zepto.js"></script>
  9. <script src="../../src/event.js"></script>
  10. <script src="../../src/fx.js"></script>
  11. <script src="../../src/fx_methods.js"></script>
  12. <script src="../../src/ie.js"></script>
  13. <style>
  14. #fx_test, #fx_test_2 { text-align: center; background: darkred; color: white; font-size: x-large; }
  15. #fx_test_2 { background: darkblue; }
  16. </style>
  17. </head>
  18. <body>
  19. <h1>Zepto fx functional</h1>
  20. <div style="width: 280px; height: 180px; background: #ddd; -webkit-user-select: none; margin-bottom: 1em">
  21. <div id="fx_test" style="height: 100%; line-height: 170px">I ♥ fx</div>
  22. </div>
  23. <div style="width: 280px; height: 180px; background: #ddd; -webkit-user-select: none; margin-bottom: 1em">
  24. <div id="fx_test_2" style="height: 100%; line-height: 170px">I ♥ fx</div>
  25. </div>
  26. <button onclick="$('#fx_test').hide('slow')">Hide</button>
  27. <button onclick="$('#fx_test').show('slow')">Show</button>
  28. <button onclick="$('#fx_test').show()">Reg. show</button>
  29. <button onclick="$('#fx_test').toggle('slow')">Toggle</button>
  30. <button onclick="$('#fx_test, #fx_test_2').toggle('slow')">Both: Toggle ('slow')</button>
  31. <button onclick="$('#fx_test, #fx_test_2').toggle()">Both: Toggle</button>
  32. <br>
  33. <button onclick="$('#fx_test').fadeIn('slow')">Fade in</button>
  34. <button onclick="$('#fx_test').fadeOut('slow')">Fade out</button>
  35. <button onclick="$('#fx_test').fadeToggle('slow')">Fade toggle</button>
  36. <button onclick="$('#fx_test, #fx_test_2').fadeToggle('slow')">Both: Fade toggle</button>
  37. <div id="browser"> </div>
  38. <script>
  39. $('#browser').text(navigator.userAgent)
  40. $('#fx_test_2').toggle()
  41. </script>
  42. </body>
  43. </html>