Skip to content
Related Articles

Related Articles

jQuery Mobile panel animate Option

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 13 Jan, 2022

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. 

Panels are widgets used to create columns, drawers, collapsible menus, etc. They are very flexible widgets and can be used for multiple purposes.

In this article, we are going to jQuery Mobile panel animate option. Whenever a panel is opened or closed, the panels slowly open and close as animation. The option takes a boolean value and if set to false, the panels work instantly.

Syntax: The animate option takes a boolean value and the default value is set to true. If the option is set to false, no animation takes place. If the option is true, the animation works.

$("#gfgpanel").panel({
    animate:false,
});

 

  • Get the animate option.

    var animate = $("#gfgpanel" ).panel( "option", "animate" );
  • Set the animate option.

    $("#gfgpanel").panel( "option", "animate", false );

CDN Links: Use the following CDN links for your jQuery Mobile project.

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: In the following example, there are two panels, one panel has the animate option set to true and the other panel option is set to false.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
         "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div data-role="page">
        <div data-role="header">
            <h1 style="color:green;">GeeksforGeeks</h1>
        </div>
        <div data-role="main" class="ui-content">
            <h4>jQuery Mobile Panel animate Option</h4>
            <a href="#gfgpanel1" data-role="button">
               Open Panel 1</a>
            <a href="#gfgpanel2" data-role="button">
               Open Panel 2</a>
        </div>
        <div data-role="panel" id="gfgpanel1">
            <div class="panel-content"></div>
            <h2>Welcome to GeeksforGeeks</h2>
            <p>Panel animate option is false</p>
  
            <a href="#" data-rel="close" data-role="button">
               Close panel</a>
        </div>
        <div data-role="panel" id="gfgpanel2" data-position="right">
            <div class="panel-content"></div>
            <h2>Welcome to GeeksforGeeks</h2>
            <p>Panel animate option is true</p>
  
            <a href="#" data-rel="close" data-role="button">
              Close panel</a>
        </div>
    </div>
    <script>
    $(document).ready(function() {
        $("#gfgpanel1").panel({
            animate:false,
        });
        $("#gfgpanel2").panel({
            animate:true,
        });
    });
    </script>
</body>
</html>

Output:

jQuery Mobile panel animate Option

Reference: https://api.jquerymobile.com/panel/#option-animate


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!