Found 766 Articles for JQuery

jQuery stop() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:35:24

167 Views

The stop() method in jQuery is used to stop an animation before it ends.SyntaxThe syntax is as follows −$(selector).stop(stopAll, goToEnd);Above, stopAll clears all animation, whereas gotoEnd is used to specify whether to complete the current animation immediately or not.ExampleLet us now see an example to implement the jQuery stop() method − Live Demo    $(document).ready(function(){       $(".button1").click(function(){          var div = $("div");          div.animate({height: 250}, "slow");          div.animate({left: "+=200", top: "+=100" }, "slow");          div.queue(function(){             div.dequeue();     ... Read More

jQuery detach() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:30:33

150 Views

The detach() method in jQuery is used to remove selected elements.SyntaxThe syntax is as follows −$(selector).detach()ExampleLet us now see an example to implement the jQuery detach() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("span").detach();       });    }); span {    background-color: red;    color: white; } Demo Heading This is a demo text. Remove element OutputThis will produce the following output −Click “Remove element” −

jQuery dequeue() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:28:09

157 Views

The dequeue() method in jQuery is used to remove the next function from the queue and then execute the function.SyntaxThe syntax is as follows −$(selector).dequeue(queue)Above, the queue is the name of the queue.ExampleLet us now see an example to implement the jQuery dequeue() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          var div = $("div");          div.animate({height: 250}, "slow");          div.animate({left: "+=200", top: "+=100" }, "slow");          div.queue(function(){             div.dequeue();          });       ... Read More

jQuery remove() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:25:21

90 Views

The remove() method in jQuery is used to remove the selected elements.SyntaxThe syntax is as follows −$(selector).remove(selector)Above, the parameter selector is used to specify one or more elements to be removed.ExampleLet us now see an example to implement the jQuery remove() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("span").remove();       });    }); span {    background-color: red;    color: white; } Demo Heading This is a demo text. Remove element OutputThis will produce the following output −Now, click the “Remove element” to remove the span element in red. After clicking the “Remove element” button −

jQuery clearQueue() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:21:53

72 Views

The clearQueue() method in jQuery is used to remove all items from the queue.SyntaxThe syntax is as follows −$(selector).clearQueue(queue)Above, the queue is the name of the queue.ExampleLet us now see an example to implement the jQuery clearQueue() method − Live Demo    $(document).ready(function(){       $(".button1").click(function(){          var div = $("div");          div.animate({height: 250}, "slow");          div.animate({left: "+=200", top: "+=100" }, "slow");          $("span").text(div.queue().length);       });       $(".button2").click(function(){          $("div").clearQueue();       });    }); ... Read More

jQuery slideToggle() Method

AmitDiwan
Updated on 30-Dec-2019 10:03:33

217 Views

The slideToggle() method in jQuery is used to toggle between the slideUp() and slideDown() methods.SyntaxThe syntax is as follows −$(selector).slideToggle(speed, easing, callback)Above, the parameter speed is the speed of the slide effect. Here, easing is the speed of the element in different points of the animation, whereas callback is a function to be executed after slideToggle() completes.Let us now see an example to implement the jQuery slideToggle() method −Example Live Demo    $(document).ready(function(){       $("button").click(function(){          $("p").slideToggle();       });    }); Exam Info Examination begins on 24th December. ... Read More

jQuery slideDown() Method

AmitDiwan
Updated on 30-Dec-2019 10:00:57

191 Views

The slideDown() method in jQuery is used to display the selected elements.SyntaxThe syntax is as follows −$(selector).slideDown(speed, easing, callback)Above, the parameter speed is the speed of the slide effect. Here, easing is the speed of the element in different points of the animation, whereas callback is a function to be executed after slideDown() completes.ExampleLet us now see an example to implement the jQuery slideDown() method − Live Demo    $(document).ready(function(){       $(".button1").click(function(){          $("p").slideUp();       });       $(".button2").click(function(){          $("p").slideDown();       });    }); ... Read More

jQuery innerWidth() with Example

AmitDiwan
Updated on 30-Dec-2019 09:57:24

90 Views

The innerWidth() method in jQuery is used to return the inner width of an element. The method includes padding, but the border and margin aren’t included.SyntaxThe syntax is as follows −$(selector).innerWidth()ExampleLet us now see an example to implement the jQuery innerWidth() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          document.getElementById("demo").innerHTML = "Inner Width of DIV = " + $("div").innerWidth()       });    }); Demo Box Inner Width of div OutputThis will produce the following output −Click the button to get inner width −

jQuery innerHeight() with Examples

AmitDiwan
Updated on 30-Dec-2019 09:52:32

64 Views

The innerHeight() method in jQuery is used to return the inner height. It includes padding, but border and margin are ignored.SyntaxThe syntax is as follows −$(selector).innerHeight()ExampleLet us now see an example to implement the jQuery innerHeight() method− Live Demo    $(document).ready(function(){       $("button").click(function(){          document.getElementById("demo").innerHTML = "Inner Height of DIV = " + $("div").innerHeight()       });    }); Demo Box Inner Height of div OutputThis will produce the following output−Click the button to get Inner Height−

jQuery element + next Selector

AmitDiwan
Updated on 30-Dec-2019 09:49:35

116 Views

The element +next selector in jQuery is used to select the "next" element of the specified "element".SyntaxThe syntax is as follows −("ele + next")Above, ele is any valid selector, whereas the next parameter is used to specify the element that should be the next element of the element parameterExampleLet us now see an example to implement the jQuery element +next selector − Live Demo    $(document).ready(function(){       $("div + p").css("color", "orange");    }); div {    border:1px solid black;    padding:10px; } Demo Heading This is demo text. span outside ... Read More

Advertisements