注册 登录 充值会员 退出
网站、APP、小程序等定制开发,联系QQ 1206995177 毕业设计 java源码 PHP源码
充值

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

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2022-10-14
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>