jq元素移入移出

最新推荐文章于 2024-04-07 10:29:49 发布

LeuPener

最新推荐文章于 2024-04-07 10:29:49 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/sc0002/article/details/101102072

版权

本文介绍使用jQuery实现元素鼠标悬停时的动画效果，包括mouseover、mouseout、mouseenter、mouseleave及hover方法的应用，通过这些方法可以控制元素的marginTop属性，实现平滑过渡的视觉效果。

摘要由CSDN通过智能技术生成

$(’#div1’).mouseover(function() {

    $(this).animate({marginTop: 50});//.stop()
        });
        $('#div1').mouseout(function() {
            $(this).animate({marginTop: 100});//.stop()
        });

        /*进入子元素不触发*/
        $('#div1').mouseenter(function() {
            $(this).stop().animate({marginTop: 50});//加入stop()
        });
        $('#div1').mouseleave(function() {
            $(this).stop().animate({marginTop: 100});//
        });

        /*通过hover（mouseenter+mouseleave）实现简写*/
        $('#div1').hover(function() {
            $(this).stop().animate({marginTop: 50});
        }, function() {
            $(this).stop().animate({marginTop: 100});
        });
    })