图片透明效果的切换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片透明切换效果</title>
<style>
    *{ padding:0px; margin:0px;}
    .box{ position:relative; width:500px; height:400px; margin:50px auto; overflow:hidden;}
    div{position:absolute; top:0px; left:0px; opacity:1;}
    div img{ width:500px; height:400px;}
    .div1{ z-index:3;}
    .div2{ z-index:2;}
    .div3{ z-index:1;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="jquery-1.11.1.min.js"></script>

<script>
    ;(function($){
        
        function PicChange(ele,opt){
            this.$parent = ele;
            this.child = this.$parent.children();
            this.btn = true;
            this.flag = true;
        }
        PicChange.prototype = {
            'init':function(){
                this.hover();
                this.leave();
            },
            'hover':function(){
                var objWidth = parseInt(this.$parent.outerWidth(true));
                var objHeight = parseInt(this.$parent.outerHeight(true));
                var x = [-objWidth,objWidth];
                var y =  [-objHeight,objHeight];
                var _this = this;
                this.child.on('mouseover',function(){
                    if(_this.btn&&_this.flag){
                        _this.btn = false;
                        _this.flag = false;
                        var n = Math.round(Math.random()*1);
                        var m = Math.round(Math.random()*1);
                        if(n){
                            $(this).animate({'left':x[m],'opacity':0},1000,function(){
                                _this.callBack($(this));
                                _this.flag = true;
                            });
                        }else{
                            $(this).animate({'top':y[m],'opacity':0},1000,function(){
                                _this.callBack($(this));
                                _this.flag = true;
                            });
                        }
                    }
                });            
            },
            'leave':function(){
                var _this = this;
                this.$parent.on('mouseleave',function(){
                    _this.btn = true;
                });
            },
            'callBack':function(obj){
                obj.css({
                    'left':0,
                    'top':0,
                    'opacity':1,
                    'z-Index':1
                });
                
                this.child.not(obj).each(function(index, element) {
                    var nowIndex=parseInt($(this).css('z-index'));
                    $(this).css('z-index',nowIndex+1);
                });
                
            }    
        }
        
        $.fn.picChange = function (opt){
            var oChange = new PicChange(this,opt);
            return oChange.init(); 
        }
    })(jQuery);
    
    $(function(){
        $('.box').picChange();//插件形式调用
    });    
</script>
<script>
    /*$(function(){
        
        var $div = $('div').not('.box');
        var $box = $('.box');
        var btn = true;
        var flag = true;
        var objwidth = $('.box').width();
        var px = [100,-100];
        $div.mouseover(function(){    
            if(btn&&flag){
                btn = false;
                flag = false;
                var n = Math.round(Math.random()*1);
                var m = Math.round(Math.random()*1);
                if(n){
                    $(this).animate({'left':px[m],'opacity':0},1000,function(){
                        callBack($(this));
                        flag = true;
                    });
                }else{
                    $(this).animate({'top':px[m],'opacity':0},1000,function(){
                        callBack($(this));
                        flag = true;
                    });
                }
            }
        });
        $box.mouseleave(function(){
            btn = true;    
        });
        
        function callBack(obj){
            obj.css({
                'left':0,
                'top':0,
                'opacity':1,
                'z-Index':1
            });
            $div.not(obj).each(function(index, element) {
                var nowIndex=parseInt($(this).css('z-index'));
                $(this).css('z-index',nowIndex+1);
            });
        };
    });*/
</script>
</head>

<body>
    <div class="box">
        <div class="div1"><img src="http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd526695449c19a918972bd407364b.jpg"/></div>
        <div class="div2"><img src="http://e.hiphotos.baidu.com/image/pic/item/2934349b033b5bb51d5395f734d3d539b600bc37.jpg"/></div>
        <div class="div3"><img src="http://e.hiphotos.baidu.com/image/pic/item/03087bf40ad162d9467e381d13dfa9ec8a13cd1b.jpg"/></div>
    </div>
</body>
</html>
工作要用到的效果扩展插件的形式方便调用