jquery特殊效果

ゞ浴缸里的玫瑰 2022-05-09 14:34 438阅读 0赞

fadeIn() 淡入
    
        $btn.click(function(){
    
            $('#div1').fadeIn(1000,'swing',function(){
                alert('done!');
            });
    
        });
    
    fadeOut() 淡出
    fadeToggle() 切换淡入淡出
    hide() 隐藏元素
    show() 显示元素
    toggle() 切换元素的可见状态
    slideDown() 向下展开
    slideUp() 向上卷起
    slideToggle() 依次展开或卷起某个元素

## jquery链式调用 ##

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素
    .children('ul') //该元素下面的ul子元素
    .slideDown('fast') //高度从零变到实际高度来显示ul元素
    .parent()  //跳到ul的父元素，也就是id为div1的元素
    .siblings()  //跳到div1元素平级的所有兄弟元素
    .children('ul') //这些兄弟元素中的ul子元素
    .slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

## jquery动画 ##

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

$('#div1').animate({
        width:300,
        height:300
    },1000,'swing',function(){
        alert('done!');
    });

参数可以写成数字表达式：

$('#div1').animate({
        width:'+=100',
        height:300
    },1000,'swing',function(){
        alert('done!');
    });

很简单，不多做解释

发表评论取消回复

表情：

评论列表（有 0 条评论，438人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery动画效果

学习要点： 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性在以前很长一段时间里，网页上的

古城微笑少年丶/ 2022年08月18日 15:13/ 0 赞/ 186 阅读

相关【JQuery】——窗口效果

【html】 <html> <head> <title>JQuery实战-窗口效果</title> <meta http-equiv="Content-Type"

- 日理万妓/ 2022年07月14日 04:11/ 0 赞/ 164 阅读

相关 jQuery 效果 - animate() 方法

jQuery 效果 - animate() 方法 [jQuery 效果参考手册][jQuery] 实例改变 "div" 元素的高度： $(".btn1

太过爱你忘了你带给我的痛/ 2022年06月01日 02:10/ 0 赞/ 177 阅读

相关 JQuery手风琴效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Tit

深藏阁楼爱情的钟/ 2022年05月31日 09:55/ 0 赞/ 211 阅读

相关 JQuery复习之JQuery 动画效果

今日目录 1、Jquery 隐藏与显示 DOM 2、Jquery 淡入和淡出 DOM 3、Jquery 滑

逃离我推掉我的手/ 2022年05月23日 06:39/ 0 赞/ 245 阅读

相关 jquery特殊效果

fadeIn() 淡入 $btn.click(function(){ $('div1').fadeIn(10

ゞ浴缸里的玫瑰/ 2022年05月09日 14:34/ 0 赞/ 439 阅读

相关 jQuery效果

开发工具与关键技术：Visual Studio 2015–jQuery 作者：廖亚星撰写时间：2019年3月31日 MVC中jQuery有自带的动画效果可以让我们简

朴灿烈づ我的快乐病毒、/ 2022年02月23日 09:28/ 0 赞/ 236 阅读

相关 JavaScript 特殊效果代码

Error convertoring HTML to XHTML: System.InvalidOperationException: There was no XML sta

浅浅的花香味﹌/ 2021年12月20日 22:07/ 0 赞/ 222 阅读

相关放大镜jQuery效果

今天我们来写一下jQuery的效果来上代码 1,html代码 1 <div id='small'><img src="./icon/images/sj1

向右看齐/ 2021年10月01日 03:30/ 0 赞/ 446 阅读

相关 jQuery 效果

首先引入jquery <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> 1

待我称王封你为后i/ 2021年07月24日 17:36/ 0 赞/ 401 阅读