jQuery fadeOut() with Example

AmitDiwan
Updated on 12-Nov-2019 11:48:20

124 Views

The fadeOut() method in jQuery is used to change the opacity, for selected elements, from visible to hidden.SyntaxThe syntax is as follows −$(selector).fadeOut(speed, easing, callback)Above, speed is the speed of the fading effect. The easing can be swing or linear for speed at different animation points. Callback is the function to be executed after the method gets finished.ExampleLet us now see an example to implement the jQuery fadeOut() method −    $(document).ready(function(){       $(".btnout").click(function(){          $("div").fadeOut();       });       $(".btnin").click(function(){          $("div").fadeIn();     ... Read More

jQuery dblclick() with Example

AmitDiwan
Updated on 12-Nov-2019 11:45:00

124 Views

The dblclick() method in jQuery is used to trigger the dblclick event, which occurs when an element is double-clicked.SyntaxThe syntax is as follows −$(selector).dblclick()ExampleLet us now see an example to implement the jQuery dblclick() method −    $(document).ready(function(){       $(document).ready(function() {          $("p").dblclick(function() {             alert('Paragraph double clicked!')          });       });    }); Demo Heading This is a paragraph. Double click here. OutputThis will produce the following output −Double click on the paragraph to generate an alert box −

jQuery closest() with Example

AmitDiwan
Updated on 12-Nov-2019 11:42:48

227 Views

The closest() method in jQuery is used to return the first ancestor of the selected element.SyntaxThe syntax is as follows −$(selector).closest(filter)ExampleLet us now see an example to implement the jQuery closest() method −    .demo * {       display: block;       border: 2px solid blue;       padding: 5px;       margin: 15px;    }    $(document).ready(function(){       $("span").closest("ol").css({"background-color": "orange", "color": "black","border": "3px dashed orange"});    }); body ol ol ol li span OutputThis will produce the following output −

jQuery fadeIn() Method

AmitDiwan
Updated on 12-Nov-2019 11:40:12

228 Views

The fadeIn() method in jQuery is used to change the opacity, for selected elements, from hidden to visible.SyntaxThe syntax is as follows −$(selector).fadeIn(speed, easing, callback)ExampleAbove, speed is the speed of the fading effect. The easing can be swing or linear for speed at different animation points. Callback is the function to be executed after the method gets finished.Let us now see an example to implement the jQuery fadeIn() method −    $(document).ready(function(){       $(".btnout").click(function(){          $("div").fadeOut();       });       $(".btnin").click(function(){          $("div").fadeIn();     ... Read More

jQuery attr() Method

AmitDiwan
Updated on 12-Nov-2019 11:36:10

195 Views

The attr() method in jQuery is used to set or return attributes and values of the selected elements.SyntaxThe syntax is as follows −$(selector).attr(attribute)ExampleLet us now see an example to implement the jQuery attr() method −    $(document).ready(function(){       $("button").click(function(){          alert("Input Type (Student Id) = " + $("input").attr("type"));       });    }); Student Details Student Id: Click me Click on the button above to return the type of the input. OutputThis will produce the following output −Click on the above button to display the type of the input text −

jQuery appendTo() with Example

AmitDiwan
Updated on 12-Nov-2019 11:25:53

392 Views

The appendTo() method in jQuery is used to insert HTML elements at the end of the selected elements.SyntaxThe syntax is as follows −$(content).appendTo(selector)Above, content is the content to be inserted.ExampleLet us now see an example to implement the jQuery appendTo() method −    $(document).ready(function(){       $("button").click(function(){          $("New").appendTo("h3");       });    }); Blog Posts How to install Java? How to install Ruby? Click me to check new and old post status OutputThis will produce the following output −Now, click on the button above −

jQuery event.which property

AmitDiwan
Updated on 12-Nov-2019 11:23:56

127 Views

The event.which property in jQuery is used to return which keyboard key or mouse button was pressed for the event.SyntaxThe syntax is as follows −event.whichExampleLet us now see an example to implement the jQuery event.which property −    $(document).ready(function(){       $("input").keydown(function(event){          $("div").html("Which key pressed? = " + event.which);       });    }); Student Details Student Name: Student Address: Note: The key pressed in the any of the above input would be visible below. OutputThis will produce the following output −Let us now enter a value and press a key in the input −

jQuery event.type property with Example

AmitDiwan
Updated on 12-Nov-2019 11:22:07

44 Views

The event.type property in jQuery is used to return which event type was triggered.SyntaxThe syntax is as follows −event.typeExampleLet us now see an example to implement the jQuery event.type property −    .demo {       color: blue;       background-color: orange;    }    .test {       color: white;       background-color: black;    }    $(document).ready(function(){       $("p").on("click dblclick mouseover", function(event){          $("div").html(event.type+" event");       });    }); Heading Two Click here and let's see whether it ... Read More

jQuery event.timeStamp property with Example

AmitDiwan
Updated on 12-Nov-2019 11:18:25

238 Views

The event.timeStamp property in jQuery is used to return the number of milliseconds since January 1, 1970, when the event is triggered.SyntaxThe syntax is as follows −event.timeStampExampleLet us now see an example to implement the jQuery event.timeStamp property −    .demo {       color: white;       background-color: black;    }    $(document).ready(function(){       $("button").click(function(event){          $("span").text(event.timeStamp);       });    }); Milliseconds January 1, 1970 Event occurred 0 milliseconds after January 1, 1970. Milliseconds OutputThis will produce the following output −Click on the button “Milliseconds” above −

jQuery event.result Property

AmitDiwan
Updated on 12-Nov-2019 11:16:27

60 Views

The event.result property in jQuery has the last/previous value returned by an event handler triggered by the specified event.SyntaxThe syntax is as follows −event.resultExampleLet us now see an example to implement the jQuery event.result property −    .demo {       color: orange;       background-color: black;    }    $(document).ready(function(){       $("button").click(function(){          return "New text generated!";       });       $("button").click(function(event){          $("p").html(event.result);       });    }); Heading Two Click me This is a demo line. OutputThis will produce the following output. This is before clicking the button −Click the button above −

Advertisements