Opacity Hover-over animation

Thread is closed for posting
1 posts, 0 answers
  1. 6215C51A-7035-41FF-80BB-663B95EA099C
    6215C51A-7035-41FF-80BB-663B95EA099C avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 25 Aug 2010 Link to this post

    Requirements
    RadControls version

    Q2 2010
    .NET version

    4
    Visual Studio version

    2010
    programming language

    javascript, jQuery
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    This will animate an the opacity of an image inside of the rotator.

    Change "slideRotator" to whatever the CssClass is on your Rotator item (contrains the jQuery search to that container, so you can remove it if you have multiple rotators, it's just faster with it there.).  The style is being tagged to the image to no overwrite styling on the rrItem itself.

    ///Rotator load function, to add in the opacity animation
    function onSlideShowLoad(sender, args){
        $('.rrItem img', '.slideRotator').attr('style', 'opacity: 0.4')
            .hover(function(){
                $(this).stop(true, false).animate({
                    opacity: 1
                });
            },function(){
                $(this).animate({
                    opacity: 0.4
                });
        });
    }

    ** Make sure you have jQuery loaded somewhere on your page or this will not work **
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.