New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Animate hiding and showing of RadButton to fade out and fade in

Description

Generally, RadButton provides its own .set_visible() method which can be used to toggle its state:

RadButton Client-side Object Model

If you want to add some animated effect to this action to make it more pleasant to the eye, look no further than the approach below.

Animate Button Hiding

Solution

  • Approach 1:

    To achieve this requirement, you can access the element of the button and use jQuery to handle the rest:

      function externalButtonClick() {
      // var $ = $telerik.$;
      var radButton = $find('<%= RadButton1.ClientID %>');
    
      if (radButton.get_visible()) {
          $(radButton.get_element()).fadeOut("slow");
      }
      else {
          $(radButton.get_element()).fadeIn("slow");
      }
    }
    
  • Approach 2:

    Alternatively, you can delve into the secret territories of the button object and override its built-in method:

          // var $ = $telerik.$;;
      Telerik.Web.UI.RadButton.prototype.set_visible = function (value) {
          var e = Function._validateParams(arguments, [{ name: "value", type: Boolean }]);
          if (e) throw e;
          var buttonEl = this._element;
          if (!buttonEl) throw Error.invalidOperation(Sys.Res.cantBeCalledAfterDispose);
          if (value) {
              $(this._element).fadeIn("slow", function () {
                  Sys.UI.DomElement.setVisible(buttonEl, value)
              });
          }
          else {
              $(this._element).fadeOut("slow", function () {
                  Sys.UI.DomElement.setVisible(buttonEl, value) 
              });
          }
      }
    
In this article