In 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:
Post your comments / questions
Recent Article
- How to make youtube video responsive for website?
- SOLVED-Bootstrap 3 Glyphicons are not working
- Unable to read data from the transport connection: An existing connection was forcibly closed by the remote host.
- Unable to update the EntitySet 'table' because it has DefiningQuery and no DeleteFunction element exists in the ModificationFunctionMapping
- How to save the web page’s content and save into a string variable in c#?
- The model item passed into the dictionary is of type System.Linq.OrderedEnumerable but this dictionary requires a model item of type System.Collections.Generic.IList
- How to convert http to https Godaddy?
- Event object-event.which
Related Article