【Jquery】jquery动画效果animate

 

渐渐的拉长:

 

<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

时间: 2024-10-22 18:36:39

【Jquery】jquery动画效果animate的相关文章

jQuery之动画效果大全_jquery

下面介绍了几种动画效果的方法,具体如下: 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数.  show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("

jQuery实现动画效果的简单实例_jquery

一.需求原因目前jQuery已经是一个比较成熟的框架了,而且基于他的插件也有上百种,本例我手动用jQuery实现一个动画效果的例子. 二.具体实现 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv

jquery带动画效果幻灯片特效代码_jquery

本文实例讲述了jquery带动画效果幻灯片插件devrama.slider.分享给大家供大家参考.具体如下: jquery带动画效果幻灯片插件devrama.slider是一款可以在焦点图中嵌入html内容和文字动画效果,运行时可出现图文层叠显示效果,且图片下方伴有进度条效果. 运行效果图:                                 -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换

jQuery动画效果animate和scrollTop结合使用实例

 animate是jq的一个特效的函数方法,animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态. CSS属性值是逐渐改变的,这样就可以创建动画效果. 只有数字值可创建动画(比如 "margin:30px"). 字符串值无法创建动画(比如 "background-color:red").   代码如下:$('#shang').click(function(){$('html,body').animate({s

jQuery动画效果animate和scrollTop结合使用实例_jquery

CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 复制代码 代码如下: $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代码表示滚动条跳到0的位置,页面移动速度是800.结合scrollTop实用示例: 复制代码

利用jQuery的动画函数animate实现豌豆发射效果_jquery

先来看看效果图 豌豆射手,草坪还有子弹都是现成的图片, 1. jQuery是库还是框架? jQuery可以说是现在最流行的一个js类库,而非框架. 之前在知乎上看到有人说了这样一句话: You call library. Framework calls you. 我深以为然,字面意思大概就是你可以无约束地使用类库,却需要在各种限制条件下使用一个框架. 我私以为,js 库指的是直接和document文档元素交互的一个API,你可以直接引用库,让它为你服务.而框架是偏向于架构的层次,你如果想要使用框

jQuery实现动画效果的实例代码_jquery

复制代码 代码如下:     <style type="text/css">       table{border:1px solid #666;}       table td{border:1px solid #eee;width:200px;height:200px;}       img{width:200px;height:200px;border:none;position:relative;}    </style>     <script

jQuery各种动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <st

基于jquery的动画效果代码_jquery