【Jquery】jquery动画效果animate

简介: 渐渐的拉长:   关闭侧边栏 显示侧边栏 $(document).ready(function () { jQuery(document).

 

渐渐的拉长:

 

<div class="close-sidebar"><a href="#">关闭侧边栏</a></div>
<div class="show-sidebar" style="display:none;"><a href="#">显示侧边栏</a></div>
   
    <script src="js/jquery.js"></script>
    
    <script type="text/javascript">
            $(document).ready(function () {
                           
jQuery(document).ready(function($) {
    $('.close-sidebar').click(function() {
        $('.close-sidebar,.sidebar').hide();
        $('.show-sidebar').show();
        $('#shop_content').animate({
            width: "66%"
        },
        1000);
    });
    $('.show-sidebar').click(function() {
        $('.show-sidebar').hide();
        $('.close-sidebar,.sidebar').show();
        $('#shop_content').animate({
            width:"40%"
        },
        1000);
    });
});
});
        
    </script>

 

其中#shop_content为你的html中的某个div的id,然后你就随便发挥吧,各种属性,神马marginLeft,marginTop,随便玩,自己搜下animate的api

目录
相关文章
N..
|
1月前
|
JavaScript 前端开发 UED
jQuery动画特效
jQuery动画特效
N..
22 1
|
1月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
15 0
|
1月前
|
机器学习/深度学习 JavaScript
|
1月前
|
JavaScript 前端开发
调用jQuery的animate()方法无法移动的问题
调用jQuery的animate()方法无法移动的问题
|
9月前
|
JavaScript
jQuery 显示隐藏动画 show(); hide(); toggle();
jQuery 显示隐藏动画 show(); hide(); toggle();
50 0
|
9月前
|
JavaScript
jQuery 滑入滑出动画 slideDown(); slideUp(); slideToggle();
jQuery 滑入滑出动画 slideDown(); slideUp(); slideToggle();
54 0
|
9月前
|
JavaScript
jQuery 自定义动画 animate(详细步骤)
jQuery 自定义动画 animate(详细步骤)
63 0
|
9月前
|
JavaScript
jQuery stop() 停止动画(详细使用)
jQuery stop() 停止动画(详细使用)
51 0
|
9月前
|
JavaScript
jQuery fullpage.js 全屏分页以及动画使用
jQuery fullpage.js 全屏分页以及动画使用
47 0
|
9月前
|
JavaScript
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
53 0
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();