jquery写的slideLeft，slideRight

最新推荐文章于 2024-07-26 03:31:44 发布

转载最新推荐文章于 2024-07-26 03:31:44 发布 · 827 阅读

文章标签：

#slideLeft #slideRight #jquery

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的自定义动画效果——元素从左侧滑入和滑出的显示与隐藏功能。通过扩展jQuery的方法，实现了元素宽度及相关内边距、外边距的动画效果。示例中演示了如何在页面加载完成后自动触发这些动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>    
<head>    
<script type="text/javascript" src="jquery.1.2.6.js"></script>    
<script type="text/javascript">    
    jQuery.fn.slideLeftHide = function( speed, callback ) {    
        this.animate({    
            width : "hide",    
            paddingLeft : "hide",    
            paddingRight : "hide",    
            marginLeft : "hide",    
            marginRight : "hide"    
        }, speed, callback );    
    };    
    jQuery.fn.slideLeftShow = function( speed, callback ) {    
        this.animate({    
            width : "show",    
            paddingLeft : "show",    
            paddingRight : "show",    
            marginLeft : "show",    
            marginRight : "show"    
        }, speed, callback );    
    };    
</script>    
<script type="text/javascript">    
    $(function() {    
        $(".title_bar").slideLeftHide(4000);    
        $(".title_bar").slideLeftShow(4000);    
    });    
</script>    
    
    
</head>    
<body>    
    
    <div class="title_bar">    
    <img src="recruitment.png" border="0"    
             />          
    </div>    
</body>    
</html>