jquery 视觉特效（当鼠标悬停时，显示大图）

效果描述：

鼠标hover每个小图片上，相应的在ID为large处显示大图。并且伴有渐隐渐显的效果。

HTML:

        <div id="images">
            <a href="pic1.jpg"><img src="pic1.jpg" alt="" /></a>
            <a href="pic2.jpg"><img src="pic2.jpg" alt="" /></a>
            <a href="pic3.jpg"><img src="pic3.jpg" alt="" /></a>
            <a href="pic4.jpg"><img src="pic4.jpg" alt="" /></a>
            <a href="pic5.jpg"><img src="pic5.jpg" alt="" /></a>
            <a href="pic6.jpg"><img src="pic6.jpg" alt="" /></a>
        </div>
        <!--显示放大图片-->
        <div><img id="large" src="" alt=""/></div>

CSS:

#images a img{
                border: 1px solid black;
                width: 50px;
                height: 50px;
                margin: 10px;
            }

jquery：

$('#images a').hover(function(){
                    $imgpath = $(this).attr('href');
                                        $('#large').stop(true,true).fadeTo('normal', 0, function(){
                                            $(this).attr('src', $imgpath);
                                        }).fadeTo('normal', 1);
                
                }
            );

也可以用animate

$('#images a').hover(function(){

                    $imgpath = $(this).attr('href');
                                                        
                    $('#large').stop(true,true).animate({
                        'opacity':'0'
                    }, 'normal', function(){
                        $(this).attr('src', $imgpath);
                        $(this).animate({
                            'opacity':'1'
                        }, 'normal');
                    });
                
                }
            );

截图：