Rotate Image 360

Rotate Image 360 degree using Jquery & CSS

Add animation effect without flash using jquery and css. Add following code of block under HEAD section and before BODY section.

<style>

.rotate{
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;

}

.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

</style>

<body>

<img src=”Demo1.png” class=”rotate” />

</body>

Advertisements

Show/Hide control on checkbox checked in jquery

<script type=”text/javascript” language=”javascript”>

$(document).ready(function(){
$(‘#trDateFilter’).hide();
$(‘#<%= cbDateFilter.ClientID %>’).click(function(){
if($(this).attr(‘checked’))
$(‘#trDateFilter’).show();
else
$(‘#trDateFilter’).hide();
});
});

</script>

<table>

<tr>

<asp:CheckBox ID=”cbDateFilter” runat=”server” Text=” Allow Date Filter” TextAlign=”Right” />

</tr>

<tr id=”trDateFilter”>

<td>Hello World..!!!</td>

</tr>

</table>

For more information please mail me nipulwordpress@live.in