jQuery鼠标滑过动画

html

<div class="wrap">
    <div class="before"></div>
    <div class="content">鼠标划过</div>
    <div class="after"></div>
</div>

.wrap {
	width:100px;
	height:100px;
	background-color:rgb(240,236,236);
	position:relative;
	left:200px;
	overflow:hidden;
}
.before {
	width:100%;
	height:100%;
	background-color:rosybrown;
	position:absolute;
	left:-100px;
	top:0;
	opacity:0;
}
.after {
	width:100%;
	height:100%;
	background-color:rosybrown;
	position:absolute;
	right:0px;
	z-index:-1;
}
.content {
	position:absolute;
	z-index:3;
}

$('.wrap').mouseenter(function() {
    $(this).find('.before').css('opacity', '1').animate({
        'left': '0'
    }, 200)
    $(this).find('.after').css({
        'z-index': '-2',
        'width': '100px'
    })

})
$('.wrap').mouseleave(function() {
    $(this).find('.before').css({
        'opacity': '0',
        'left': '-100px'
    })
    $(this).find('.after').css('z-index', '2').animate({
        'width': '0'
    }, 200)
})

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/8296.html