【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

目录
相关文章
|
4月前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
42 0
|
16天前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
12 4
|
17天前
|
缓存 JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
17 4
|
1月前
|
JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
35 11
|
1月前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
24 11
|
2月前
|
JavaScript 前端开发
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
如何在Vue 2或Vue 3项目中引入jQuery及其动画扩展库jQuery.easing,以实现更丰富的动画效果。
105 0
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
|
4月前
|
JavaScript
jQuery 动画小练习
jQuery 动画小练习
27 0
|
4月前
|
JavaScript 前端开发
我如何使用jQuery动画我的元素
我如何使用jQuery动画我的元素
25 0
|
4月前
|
JavaScript
jQuery如何停止动画队列
jQuery如何停止动画队列
28 0
|
4月前
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
107 0