Jquery Sliding Effect
Jquery Sliding Effect
By using animate() method we can animate the controls. Here is an example to how to do that. Click the button Click Me! to see how it will work.
This below script gives you a animation effect of a Image Thumbnail using JQuery function animate() This animate() Performs a custom animation of a set of CSS properties . Below I used addClass(),removeClass() to add, remove the specified class(es) to matched elements to maintain the animation state. We will discuss more about add/remove classes using jquery in our next page...
Script
<script language="javascript">
$('#btnclickme').on("click", function () {
$('#imganimate').animate({ width: ['toggle', 'swing'], height: ['toggle', 'swing'], opacity:'toggle' }, 4000)
if (!$('#divanimationdone').hasClass('divAnimCompleted')) {
$('#divanimationdone').addClass('divAnimCompleted');
$('#divanimationdone').show({ duration: 4000 });
}
else {
$('#divanimationdone').removeClass('divAnimCompleted');
$('#divanimationdone').hide({ duration: 4000 });
}
});
</script>
CSS
<style type="text/css">
.divAnim
{
background-color: black;
color: yellow;
font-size: medium;
}
</style>
HTML
<input type="button" id="btnclickme" value="Click Me!" />
<div>
<img id="imganimate" src="/Images/logo_medium.png" alt="" width="268" height="61"
style="position: relative; left: 10px;" />
<br />
<div id="divanimationdone" style="display: none;" class="divAnim">
Animation Done!! Click again to restore...</div>
</div>
posted by OMVEER SINGH MAURYA @ January 16, 2014
0 Comments
