注册 登录 充值会员 退出
毕业设计 java源码 PHP源码
充值

jQuery鼠标悬停图片边框动画特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:1970-01-01
jQuery鼠标悬停图片边框动画特效
jQuery鼠标悬停图片边框动画特效是一款鼠标移动商品图片的时候动画显示红色边框的动画代码。


js代码

<script>
    $(function(){
//        边框效果--移入
        function biankuang(){
            $('.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)
        }
//        边框效果--移出
        function biankuang1(){

            $('.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>