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.
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) }); } }