jQuery マウスオーバー画像境界線アニメーション特殊効果

js コード

<スクリプト>
    $(関数(){
// 境界線の効果 - 内側に移動
        関数ビアンクアン(){
            $('.biankuang_1').stop(true).animate({
                高さ:'305px'
            },300)
            $('.biankuang_2').stop(true).delay(300).animate({
                幅:'360px'
            },300)
            $('.biankuang_3').stop(true).animate({
                高さ:'305px'
            },300)
            $('.biankuang_4').stop(true).delay(300).animate({
                幅:'360px'
            },300)
        }
// 境界線の効果 - 外側に移動
        関数ビアンクアン1(){

            $('.biankuang_1').stop(true).delay(100).animate({
                高さ:'0px'
            },100)
            $('.biankuang_2').stop(true).animate({
                幅:'0px'
            },100)
            $('.biankuang_3').stop(true).delay(100).animate({
                高さ:'0px'
            },100)
            $('.biankuang_4').stop(true).animate({
                幅:'0px'
            },100)
        }
// 引き金

            $('.cn_gobuy').hover(
                    関数 （） {
                            $('.text_gobuy').addClass('text_gobuy_show');
                            $('.search_y').animate({left:'150',opacity:1},300);
                        ビアンクアン();
                    }、
                    関数 （） {
                        $('.text_gobuy').removeClass('text_gobuy_show');
                        $('.search_y').animate({left:'100',opacity:0},300);
                        ビアンクアン1();
                    }
            );

    })

</script>

jQuery のマウスオーバー画像境界アニメーション特殊効果は、製品画像をマウスで動かすと赤い境界線を表示するアニメーション コードです。