图片hover状态平滑划过过渡效果

 

附源码

 

//first preload all images
$hs_images          = $hs_container.find('img');
var total_images    = $hs_images.length;
var cnt             = 0;
$hs_images.each(function(){
    var $this = $(this);
    $('<img>').load(function(){
        ++cnt;
        if(cnt == total_images){
            $hs_areas.each(function(){
                var $area       = $(this);
                //when the mouse enters the area we animate the current
                //image (random animation from array animations),
                //so that the next one gets visible.
                //"over" is a flag indicating if we can animate 
                //an area or not (we don't want 2 animations 
                //at the same time for each area)
                $area.data('over',true).bind('mouseenter',function(){
                    if($area.data('over')){
                        $area.data('over',false);
                        //how many images in this area?
                        var total       = $area.children().length;
                        //visible image
                        var $current    = $area.find('img:visible');
                        //index of visible image
                        var idx_current = $current.index();
                        //the next image that's going to be displayed.
                        //either the next one, or the first one if the current is the last
                        var $next       = (idx_current == total-1) ? $area.children(':first') : $current.next();
                        //show next one (not yet visible)
                        $next.show();
                        //get a random animation
                        var anim        = animations[Math.floor(Math.random()*total_anim)];
                        switch(anim){
                            //current slides out from the right
                            case 'right':
                                $current.animate({
                                    'left':$current.width()+'px'
                                },
                                animSpeed,
                                easeType,
                                function(){
                                    $current.hide().css({
                                        'z-index'   : '1',
                                        'left'      : '0px'
                                    });
                                    $next.css('z-index','9999');
                                    $area.data('over',true);
                                });
                                break;
                            //current slides out from the left
                            case 'left':
                                $current.animate({
                                    'left':-$current.width()+'px'
                                },
                                animSpeed,
                                easeType,
                                function(){
                                    $current.hide().css({
                                        'z-index'   : '1',
                                        'left'      : '0px'
                                    });
                                    $next.css('z-index','9999');
                                    $area.data('over',true);
                                });
                                break;
                            //current slides out from the top   
                            case 'top':
                                $current.animate({
                                    'top':-$current.height()+'px'
                                },
                                animSpeed,
                                easeType,
                                function(){
                                    $current.hide().css({
                                        'z-index'   : '1',
                                        'top'       : '0px'
                                    });
                                    $next.css('z-index','9999');
                                    $area.data('over',true);
                                });
                                break;
                            //current slides out from the bottom    
                            case 'bottom':
                                $current.animate({
                                    'top':$current.height()+'px'
                                },
                                animSpeed,
                                easeType,
                                function(){
                                    $current.hide().css({
                                        'z-index'   : '1',
                                        'top'       : '0px'
                                    });
                                    $next.css('z-index','9999');
                                    $area.data('over',true);
                                });
                                break;
                            //current slides out from the right and fades out
                            case 'rightFade':
                                $current.animate({
                                    'left':$current.width()+'px',
                                    'opacity':'0'
                                },
                                animSpeed,
                                easeType,
                                function(){
                                    $current.hide().css({
                                        'z-index'   : '1',
                                        'left'      : '0px',
                                        'opacity'   : '1'
                                    });
                                    $next.css('z-index','9999');
                                    $area.data('over',true);
                                });
                                break;
                            //current slides out from the left and fades out    
                            case 'leftFade':
                                $current.animate({
                                    'left':-$current.width()+'px','opacity':'0'
                                },
                                animSpeed,
                                easeType,
                                function(){
                                    $current.hide().css({
                                        'z-index'   : '1',
                                        'left'      : '0px',
                                        'opacity'   : '1'
                                    });
                                    $next.css('z-index','9999');
                                    $area.data('over',true);
                                });
                                break;
                            //current slides out from the top and fades out 
                            case 'topFade':
                                $current.animate({
                                    'top':-$current.height()+'px',
                                    'opacity':'0'
                                },
                                animSpeed,
                                easeType,
                                function(){
                                    $current.hide().css({
                                        'z-index'   : '1',
                                        'top'       : '0px',
                                        'opacity'   : '1'
                                    });
                                    $next.css('z-index','9999');
                                    $area.data('over',true);
                                });
                                break;
                            //current slides out from the bottom and fades out  
                            case 'bottomFade':
                                $current.animate({
                                    'top':$current.height()+'px',
                                    'opacity':'0'
                                },
                                animSpeed,
                                easeType,
                                function(){
                                    $current.hide().css({
                                        'z-index'   : '1',
                                        'top'       : '0px',
                                        'opacity'   : '1'
                                    });
                                    $next.css('z-index','9999');
                                    $area.data('over',true);
                                });
                                break;      
                            default:
                                $current.animate({
                                    'left':-$current.width()+'px'
                                },
                                animSpeed,
                                easeType,
                                function(){
                                    $current.hide().css({
                                        'z-index'   : '1',
                                        'left'      : '0px'
                                    });
                                    $next.css('z-index','9999');
                                    $area.data('over',true);
                                });
                                break;
                        }   
                    }
                });
            });
             
            //when clicking the hs_container all areas get slided
            //(just for fun...you would probably want to enter the site
            //or something similar)
            $hs_container.bind('click',function(){
                $hs_areas.trigger('mouseenter');
            });
        }
    }).attr('src',$this.attr('src'));
});