jQuery 学习总结（二）页面特效

r囧r小猫 2022-05-24 09:51 187阅读 0赞

在600毫秒内切换段落的高度和透明度

$("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow");

移动效果

$(function() {
        //向左移动
        $("#left").click(function() {
            $(".block").show();
            $(".block").animate({
                width: "+200px",
                height: "+200px",
                fontSize: "1em",
                borderWidth: 10
            },
            "slow", "swing");
        });
        //向右移动
        $("#right").click(function() {
            $(".block").show();
            $(".block").animate({
                width: "-200px",
                height: "-200px",
                fontSize: "10em",
            },
            "slow", "swing");
        });
        /* 
    $("p").animate({ 
        height: '200px', opacity: 'toggle' 
    }, "slow"); 
    $("p").animate({ 
        left: 50, opacity: 'show' 
    }, 500); */
        //先渐隐 
        $("p").animate({
            opacity: 'toggle'
        },
        "slow", "swing");
        //后显示 
        $("p").animate({
            opacity: 'show'
        },
        500,
        function() {
            alert('加载完成');
        });
    });

// 在一个动画中同时应用三种类型的效果

$("#go").click(function() {
        $("#block").animate({
            width: "90%",
            height: "100%",
            fontSize: "10em",
            borderWidth: 10
        },
        1000);
    });

发表评论取消回复

表情：

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

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

相关阅读

相关 Jquery mobile学习教程之Jquery mobile 二页面结构

Jquery Mobile基本框架在jQuery Mobile中，有一个基本的页面框架模型，就是在页面中通过将一个标记的“data-role”属性设置为“pag

一时失言乱红尘/ 2023年10月16日 19:32/ 0 赞/ 39 阅读

相关 jQuery学习总结

1.根据class标签获取jquery对象点击跳转跳转团队页面 <li class="team"> <img src="../img/team.png"

野性酷女/ 2022年10月23日 01:59/ 0 赞/ 225 阅读

相关 jquery 特效

[http://www.sohtanaka.com/web-design/simple-accordion-w-css-and-jquery/][http_www.sohtan

「爱情、让人受尽委屈。」/ 2022年09月29日 04:12/ 0 赞/ 164 阅读

相关 jquery学习总结

jQuery是轻量级的js库，帮助用户更方便的处理HTML、events，实现动态效果，与ajax交互，它具有添加动态特效，扩展插件，链式调用（让代码简单美观

╰+攻爆jí腚メ/ 2022年08月19日 13:22/ 0 赞/ 199 阅读

相关 JQuery学习总结

一、选择网页元素　　jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。　　使用jQuery的第

比眉伴天荒/ 2022年08月03日 00:08/ 0 赞/ 234 阅读

相关 JQuery学习总结

1 jQuery 入门 1.1 jQuery 的功能和优势: jQuery 作为JavaScript 封装的库，他的目的就是为了简化开发者使用JavaScript。

绝地灬酷狼/ 2022年07月16日 13:48/ 0 赞/ 230 阅读

相关 JQuery总结------元素选择，操作，特效动画

作为一名后端开发，怎么可以不懂点前端~~~ 这里将常用的JQuery函数进行了一些总结 1.什么是jquery? 总的来说，jQuery 是一个 JavaScrip

末蓝、/ 2022年06月08日 03:50/ 0 赞/ 251 阅读

相关 jQuery 学习总结（二）页面特效

在600毫秒内切换段落的高度和透明度 $("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow")

r囧r小猫/ 2022年05月24日 09:51/ 0 赞/ 188 阅读

相关 jQuery学习总结

一、jQuery选择器 jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 <p> 元素。 $("p.in

绝地灬酷狼/ 2022年05月17日 08:34/ 0 赞/ 213 阅读

相关 jQuery学习（二）——jQuery选择器总结

选择器总结什么是jQuery选择器？ jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQue

灰太狼/ 2021年06月22日 15:35/ 0 赞/ 498 阅读