Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET AJAX > Rotator > Opacity Hover-over animation

Not answered Opacity Hover-over animation

Feed from this thread
  • Steve MVP avatar

    Posted on Aug 25, 2010 (permalink)

    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 **
    Attached files

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET AJAX > Rotator > Opacity Hover-over animation