Opacity Hover-over animation

1 posts, 0 answers
  1. Steve
    Steve avatar
    1772 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