Repeat animation in jQuery

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.9.1.js’></script> <script type=’text/javascript’> $(document).ready(function(){ setInterval(callMe,2000); }); function callMe(){ $(“div”).animate({left:’250px’}).fadeOut().animate({left:’0′}).fadeIn(); } </script> </head> <body> <button>Start</button> <br /> <br /> <div style=”background: black; height: 100px; width: 100px; position: absolute;”> </div> </body> </html>

Slide toggle by time in jquery

<html> <head> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> <script type=”text/javascript”> $(document).ready(function() { $(“button”).click(function() { $(this).slideToggle(2000); }); }); </script> </head> <body> <div> Check the button you click <button>Click</button> </div> </body> </html>

Outline Border Checkbox in jQuery

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.4.4.min.js’></script> <script type=’text/javascript’> $(window).load(function(){ $(function(){ $(‘#chk’).css(‘outline-color’, ‘black’); $(‘#chk’).css(‘outline-style’, ‘solid’); $(‘#chk’).css(‘outline-width’, ‘thick’); }); }); </script> </head> <body> <input type=”checkbox” id=”chk” /> </body> </html>

Get selected option in jQuery

<html> <head> <script type=”text/javascript” src=’http://code.jquery.com/jquery-1.5.2.js’></script> <script type=”text/javascript”> $(document).ready(function(){ $(“select”).change(function () { var str = “”; $(“select option:selected”).each(function () { str += $(this).text() + ” “; }); $(“div”).text(str); }) .change(); }); </script> </head> <body> <select name=”find” multiple=”multiple”> <option>A</option> <option selected=”selected”>B</option> <option>C</option> <option selected=”selected”>D</option> <option>E</option> <option>F</option> </select> <div></div> </body> </html>

Use custom image as Cursor in jQuery

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.10.1.js’></script> <style type=’text/css’> div { width: 500px; height: 500px; background-color: #F00; } </style> <script type=’text/javascript’> $(window).load(function(){ $(“div”).css(‘cursor’,’url(“cursor.png”),auto’); <!–You can change cursor.png image to change other image you will be shown in the website–> }); </script> </head> <body> <div></div> </body> </html>

Slide to hide Animation in jQuery

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.10.1.js’></script> <script type=’text/javascript’> $(window).load(function(){ $(document).ready(function () { $(‘.show_hide’).click(function () { $(‘.slidingDiv’).slideToggle(‘fast’); }); }); }); </script> </head> <body> <div class=”slidingDiv” style=”display: none;”>Sliding Div</div> <button class=”show_hide”>Show/Hide</button> </body> </html>

Blink text in jQuery

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-2.1.0.js’></script> <script type=’text/javascript’>//<![CDATA[ $(window).load(function(){ setInterval(function(){ $(‘.comments’).toggle(); }, 1000); });//]]> </script> </head> <body> <div class=”comments”>Hello World</div> </body> </html>

Create a Grid of dragable divs in jQuery Event

In this code you will be create grid from the Dragable from the any place from the website . <!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.9.1.js’></script> <script type=”text/javascript” src=”http://code.jquery.com/ui/1.9.2/jquery-ui.js”></script> <style type=’text/css’> .placeholder { background: #EEE; border: 1px dashed #ddd; visibility: visible !important; float: left; margin: 15px; display: block; } #special { width: 232px; list-style-type: none;

Get color from color picker in jQuery

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.9.1.js’></script> <script type=’text/javascript’> $(window).load(function(){ $(“#colorpicker”).on(“change”,function(){ $(“.myclass”).css(“color”,$(“#colorpicker”).val()); }); }); </script> </head> <body> <input type=”color” id=”colorpicker” /> <p class=”myclass”>Hello World</p> </body> </html>