jquey实例之animate

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="jquery.js"></script>
    </head>

    <body>
        <img src="8fbf0884jw1drfmvfrhrhj.jpg" width="300" height="300"/>
        <button id="btn1">放大</button>
        <button id="btn2">缩小</button>
    </body>
</html>
        <script>
            $(function(){
                $(‘#btn1‘).click(function(){
                alert("11");
                    $(‘img‘).animate({width:1000,height:1000},500);
                });
                $(‘#btn2‘).click(function(){
                    $(‘img‘).animate({width:300,height:300},500);
                });

            });
        </script>

jquey实例之animate,布布扣,bubuko.com

时间: 2024-08-06 18:36:29

jquey实例之animate的相关文章

jQuery 实例

jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 hide() 函数,隐藏所有 <p> 元素. $(".test").hide() 演示 jQuery 的 hide() 函数,隐藏所有 class="test" 的元素. $("#test").hide() 演示 jQuery 的 hide

前端学习——jquery操作例子

一.jquery和DOM函数的转换 1.1 jquery转换成dom $('#i1') --------------> $('#i1')[0] 2.1 dom转换成jquery var i1=documen.getElementById('#i1')---------> $(i1) 二.写左侧菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

松软科技课堂:jQuery 效果 - 动画

jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法: $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性. 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 可选的 callback 参数是动画完成后所执行的函数名称. 下面的例子演示 animate() 方法的简单

animate实例介绍

1.animate,setInterval组合不断滚动: function Tscroll(){ $().animate(); } setInter("Tscroll()",1000); //注意里面的是 Tscroll(),而不是 Tscroll clearInterval  用法: function Tscroll(){ $().animate(); Ht = setInter("Tscroll()",1000); } $().click(function(){

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

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

jQuery中animate与scrollTop、offset().top实例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果   $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作

jQuery插件实例四:手风琴效果[无动画版]

手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是有动画效果的. 在这个插件中,CSS和JS的配置非常重要,需要特别注意.另外,加个思考,请先看完后再想这个问题:当点击其中某项时,给width直接添加animate是否合适,当快速在其上移动时,如何保证效果? 效果图预览 插件JS accordionB.js 1 ; 2 (function ($,

jQuery动画animate方法使用介绍

jQuery动画animate方法使用介绍 用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式.paramsOptions一组包 含作为动画属性和终值的样式属性和及其值的集合 params 对象{},注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left,如果使用