Open In App

jQWidgets jqxDropDownButton animationType Property

Last Updated : 29 Sep, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDropDownButton is used to illustrate a jQuery widget that contains a number of selectable as well as expandable items displayed in the dropdown button.

The animationType property is used to set or get the style of animation which is to be used. It is of type string and its default value is slide.

Its possible values are as follows.

  • fade
  • slide
  • none

 

Syntax:

To set the animationType property.

$('Selector').jqxDropDownButton({animationType: 'none'});

To get the animationType property.

var animationType = $('Selector').jqxDropDownButton('animationType');

Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>

Example: The below example illustrates the jqxDropDownButton animationType property in jQWidgets.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="jqwidgets/styles/jqx.base.css"
      type="text/css"
    />
    <script type="text/javascript" 
        src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxbuttons.js"></script>
  </head>
  
  <body>
    <center>
      <h1 style="color: green">GeeksforGeeks</h1>
      <h3>jQWidgets jqxDropDownButton animationType property</h3>
      <br />
      <div style="float: center" id="jqxDdB">
        <div id="jqxT">
          <ul>
            <li>GFG</li>
            <li>
              Languages
              <ul>
                <li>C</li>
                <li>Java</li>
              </ul>
            </li>
            <li>
              Subjects
              <ul>
                <li>Data Structutre</li>
                <li>Algorithm</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </center>
  
    <script type="text/javascript">
      $(document).ready(function () {
        $("#jqxDdB").jqxDropDownButton({
          height: "25px",
          width: "70px",
          animationType: "fade",
        });
  
        $("#jqxT").jqxTree({});
        $("#jqxDdB").jqxDropDownButton("setContent", "Select");
      });
    </script>
  </body>
</html>


Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxbutton/jquery-button-api.htm?search=



Similar Reads

jQWidgets jqxComboBox animationType Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxComboBox represents a jQuery combobox widget that contains an input field with auto-complete functionality and a list of selectable items displayed in a dr
2 min read
jQWidgets jqxTabs animationType Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxTabs represents a jQuery Tab widget that is used for breaking the content into multiple sections. The &lt;li&gt; elements are used for tab title and &lt;di
2 min read
jQWidgets jqxWindow animationType Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxWindow is used for entering data or viewing information in an application. The animationType property is used to set or get the specified window's close and s
2 min read
jQWidgets jqxExpander animationType Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxExpander represents a jQuery widget that displaying the header and content sections. Click on the header section to expand or collapse the content. The ani
2 min read
jQWidgets jqxDateTimeInput animationType Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDateTimeInput widget is a jQuery datetimeinput that is used for selecting the date or time using a displayed calendar or by using the keyboard. The animationT
2 min read
jQWidgets jqxRibbon animationType Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxRibbon is a jQuery widget that can be used as a tabbed toolbar or mega menu. The animationType property is used to set or return the animation type of the
2 min read
jQWidgets jqxNavigationBar animationType Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxNavigationBar is used for representing a jQuery widget that has header and content sections. On clicking over the header, the content will be expanded or coll
2 min read
jQWidgets jqxResponsivePanel animationType Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxResponsivePanel is a jQuery widget that is used to represent a panel widget with responsive behavior. The responsive panel is used to display the content in a
2 min read
jQWidgets jqxListMenu animationType Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxListMenu is a jQuery widget that is used to display a collection of Ordered and Unordered Lists. We can create a nested list by using the ordered and unordere
2 min read
jQWidgets jqxPopover animationType Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxPopover is a small overlay of the content that is used for displaying secondary information of any element when it is clicked by a user. The animationType pro
2 min read