I am just using a very simple Jquery, and its NOT working in preview panels but its working in chrome and ie itself.
My code:
- Code: Select all
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--<script type="text/javascript" src="scripts.js"></script> -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button>Start Animation</button>
<p>By default, position is set to static. To be able to move the element you need to set position property to a relative, fixed, or absolute!</p>
<div style="background: #225; height: 50px; width: 50px; position: absolute; border-radius: 90px;"></div>
<script>
$(document).ready(() => {
$("button").click(() => {
var div = $("div");
div.animate({height: '300px', opacity: '0.2'}, "slow");
div.animate({width: '300px', opacity: '0.4'}, "slow");
div.animate({height: '50px', opacity: '0.2'}, "slow");
div.animate({width: '50px', opacity: '0.4'}, "slow");
});
});
</script>
</body>
</html>
