techTutorz: Roll Effect On Elements Using Jquery

In this post we are going to show : how to make an element roll forward on mouseover.

First of all you need to download the JQuery plugin file from http://jquery.com/ to know more about including and using JQuery file read our post downloading and including JQuery API and you will also require a third party JQuery plugin known as JQTransit which you can download it from here.
Create a simple html file with a table as shown below

   <html>
     <head>
     </head>

     <body>

      <table id="r">
       <tr>
        <td>rrll</td>
       </tr>
      </table>

     </body>

   </html>

Then embed the downloaded JQuery files in your html file between the <head> tag using the <script> tag as shown below

   <head>

   <!-- -------------- path of your downloaded jquery file goes inside 'src' attribute ------------ -->

   <script type="text/javascript" src="JQuery.js"></script>

   <script type="text/javascript" src="jQtransit.js"></script> 

   </head>

After that add another script tag in <head> and write your JQuery code to roll the element as shown below


   <script type="text/javascript">
  
   $(document).ready(function(){

        $("#r").mouseenter(function(){
     
      $(this).transition({x:'+=200px',rotate:'+=360deg'},2000);     
   }); 

   });

   </script>

You are all set and ready to go. Check out the demo given below.

You can download the entire source code by clicking below download button.

Download

Hope you liked our post if you did please link this post to your blog our website and do comment.

Happy Programming !

techTutorz

Pages

Monday, May 18, 2015

Roll Effect On Elements Using Jquery

No comments :

Post a Comment