jQuery Mobile Toolbar transition Option

Last Updated : 10 Feb, 2022

jQuery Mobile is a JavaScript library built using jQuery & is based on the user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. The jQuery toolbar is a widget that can be utilized to enhance headers and footers. These widgets are used to add toolbars to the top &/or bottom of the page.

In this article, we will be using the jQuery Mobile Toolbar transition option. It is used to set the type of transition that we want while the toolbar is hiding/showing. This transition option is facilitated by the fixed Toolbar extension & is only applicable with the fixed toolbar. The default value is "slide" & it is of string type.

.Syntax: Initializing the toolbar by specifying the transition option:

$( "Selector" ).toolbar({
  transition: "none"
});

Setting & returning the transition option, after initialization:

Get the transition option:

var transition = $( "Selector" ).toolbar( "option", "transition" );

Set the transition option:

$( "Selector" ).toolbar( "option", "transition", "fade" );

Accepted values:

none: The toolbar will appear and disappear without any transition.
slide: The toolbar will slide in/out when it is toggled.
fade: The toolbar will fade in/out when it is toggled.

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

<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-2.1.3.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

Example 1: We will set the transition option to "slide".

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=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>

    <script>
        $(document).ready(function () {

            // Setting to "slide" by default
            $("#GFG").toolbar({
                transition: "slide"
            });
        })
    </script>
</head>

<body>
    <div data-role="page">
        <center>
            <h2 style="color: green">GeeksforGeeks</h2>
            <h3>jQuery Mobile Toolbar transition option</h3>
            <div id="GFG" data-role="header" data-position="fixed">
                <h1>Toolbar</h1>
            </div>
            <h2>What is GeekforGeeks?</h2>
            <p style="padding: 0px 20px;">
                GeeksforGeeks is a computer science portal
                for geeks by geeks. Here you can find articles
                on various computer science topics like
                Data Structures, Algorithms and many more....
                GeekforGeeks was founded by Sandeep Jain in 2009.
                GeeksforGeeks also provide courses, you can
                find the courses at
                <a href="https://www.geeksforgeeks.org/courses">
                    https://www.geeksforgeeks.org/courses
                </a>
                For cracking interviews of top product based companies,
                you need to have good and deep understanding of topics
                like DSA, System design etc. GeeksforGeeks provide you
                quality content so that you can prepare for the interviews.
                GeeksforGeeks also have a practice portal where you can
                practice problems and brush on your skills. You can visit
                the practice portal at
                <a href="https://practice.geeksforgeeks.org">
                    https://practice.geeksforgeeks.org
                </a>
            </p>

        </center>
    </div>
</body>

</html>

Output: From the output, observe the transition of the toolbar which is set to slide & it disappears with a sliding effect in the upward direction, while on click.

Example 2: We will set the transition option to "none".

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=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>

    <script>
        $(document).ready(function () {
            $("#GFG").toolbar({
                transition: "none"
            });
        })
    </script>
</head>

<body>
    <div data-role="page">
        <center>
            <h2 style="color: green">GeeksforGeeks</h2>
            <h3>jQuery Mobile Toolbar transition option</h3>
            <div id="GFG" data-role="header" data-position="fixed">
                <h1>Toolbar</h1>
            </div>
            <h2>What is GeekforGeeks?</h2>
            <p style="padding: 0px 20px;">
                GeeksforGeeks is a computer science portal
                for geeks by geeks. Here you can find articles
                on various computer science topics like
                Data Structures, Algorithms and many more....
                GeekforGeeks was founded by Sandeep Jain in 2009.
                GeeksforGeeks also provide courses, you can
                find the courses at
                <a href="https://www.geeksforgeeks.org/courses">
                    https://www.geeksforgeeks.org/courses
                </a>
                For cracking interviews of top product based companies,
                you need to have good and deep understanding of topics
                like DSA, System design etc. GeeksforGeeks provide you
                quality content so that you can prepare for the interviews.
                GeeksforGeeks also have a practice portal where you can
                practice problems and brush on your skills. You can visit
                the practice portal at
                <a href="https://practice.geeksforgeeks.org">
                    https://practice.geeksforgeeks.org
                </a>
            </p>

        </center>
    </div>
</body>

</html>