JQuery
How to animate image using jquery?
By: Mohamed Rasik | May,19 2016 | Css , JQueryIn this article we will discuss to animate image using method animate(). We can set numeric css properties width, height, padding, margin, etc. we can also specify duration using predefined string slow,fast,medium or time duration in milliseconds.
Example:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>simple jQueryAnimation Effects</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
button {
width: 100px;
height:50px;
background: #00BCD4;
border-style: solid; /* Required to animate border width */
border-color:#808080;
color:white;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#btnAnimate").click(function () {
$("img").animate({
width: "600px"
});
});
});
</script>
</head>
<body style="border:1px solid #DED8D8;width:500px;">
<h2 style="color:#00BCD4"> simple jQuery Animation Effects</h2>
<button id="btnAnimate" type="button">animate</button>
<p>
<img src="http://www.infinetsoft.com/Images/logoinfi.png" alt="logo">
</p>
</body>
</html>
Output:
