jquery特殊效果

ゞ浴缸里的玫瑰 2022-05-09 14:34 525阅读 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 条评论，525人围观）

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

相关阅读

相关 JQuery效果

jQuery hide()和show() 使用hide()和show()方法来隐藏和显示HTML元素: <!DOCTYPE html> <html>

布满荆棘的人生/ 2023年07月19日 13:30/ 0 赞/ 12 阅读

相关 jQuery手风琴效果

原地址：[http://www.jq22.com/jquery-info9370][http_www.jq22.com_jquery-info9370] <!do

ゝ一纸荒年。/ 2022年09月25日 14:23/ 0 赞/ 5 阅读

相关 jQuery动画效果

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

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

相关【JQuery】——窗口效果

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

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

相关 JQuery手风琴效果

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

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

相关 jquery特殊效果

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

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

相关 jQuery效果

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

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

相关 JavaScript 特殊效果代码

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

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

相关放大镜jQuery效果

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

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

相关 jQuery 效果

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

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