Telerik blogs

Do you think that RadComboBox animations are boring? We can spice them up

with a little  help from jQuery.

Let's make the dropdown fade for example - This can be done very easily

using the fadeIn, fadeTo and fadeOut jQuery methods. You can download a

sample project for more details.

We can also animate the text of the items. All you need  to do is to

animate the padding-left css attribute of the item's DOM element. The

following script shows how the text can be moved when you hover over the

item:

$('.rcbItem')

.mouseover(function(){

         $(this).stop().animate({paddingLeft:"54px"}, {duration:500});

})

.mouseout(function(){

         $(this).animate({paddingLeft:"4px"}, {duration:500});

})

And the result is:

image

If you want to see more about our controls and jQuery you can refer to Vladimir Enchev's blog post about RadGrid  animation.


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Comments

Comments are disabled in preview mode.