jQuery selector chaining example
home
Run
screen_rotation
fullscreen
cloud_download
<!DOCTYPE html> <html> <head> <title>Slide Toggle- jQuery Example</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#animateButton").click(function(){ $("#demoDiv, .myClass, #demoPara").animate({backgroundColor:'yellow'},"slow").css("border","5px solid green"); }); }); </script> </head> <body> <a href="javascript:void(0)" id="animateButton"> Click To Animate </a><br> <br> <div id="demoDiv" style="margin:10px;width:100px;height:100px;display:block;background:yellow;"> Animate Me.</div> <p id="demoPara" style="margin:10px;width:100px;height:100px;display:block;background:skyblue;"> Demo Para</p> <p class="myClass" style="margin:10px;width:100px;height:100px;display:block;background:gray;"> Para with .myClass</p> </body> </html>
<!DOCTYPE html> <html> <head> <title>Slide Toggle- jQuery Example</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#animateButton").click(function(){ $("#demoDiv, .myClass, #demoPara").animate({backgroundColor:'yellow'},"slow").css("border","5px solid green"); }); }); </script> </head> <body> <a href="javascript:void(0)" id="animateButton"> Click To Animate </a><br> <br> <div id="demoDiv" style="margin:10px;width:100px;height:100px;display:block;background:yellow;"> Animate Me.</div> <p id="demoPara" style="margin:10px;width:100px;height:100px;display:block;background:skyblue;"> Demo Para</p> <p class="myClass" style="margin:10px;width:100px;height:100px;display:block;background:gray;"> Para with .myClass</p> </body> </html>
Copyrights@tutorialsplane.com