jQuery鼠标悬停图片边框动画特效是一款鼠标移动商品图片的时候动画显示红色边框的动画代码。
js代码
<script>
$(function(){
//边框效果--移入
functionbiankuang(){
$('.biankuang_1').stop(true).animate({
height:'305px'
},300)
$('.biankuang_2').stop(true).delay(300).animate({
width:'360px'
},300)
$('.biankuang_3').stop(true).animate({
height:'305px'
},300)
$('.biankuang_4').stop(true).delay(300).animate({
width:'360px'
},300)
}
//边框效果--移出
functionbiankuang1(){$('.biankuang_1').stop(true).delay(100).animate({
height:'0px'
},100)
$('.biankuang_2').stop(true).animate({
width:'0px'
},100)
$('.biankuang_3').stop(true).delay(100).animate({
height:'0px'
},100)
$('.biankuang_4').stop(true).animate({
width:'0px'
},100)
}
//触发$('.cn_gobuy').hover(
function(){
$('.text_gobuy').addClass('text_gobuy_show');
$('.search_y').animate({left:'150',opacity:1},300);
biankuang();
},
function(){
$('.text_gobuy').removeClass('text_gobuy_show');
$('.search_y').animate({left:'100',opacity:0},300);
biankuang1();
}
);})</script>
下载
|
|