jQuery操作之效果

seal_de 发布于2019-08-21 11:47 / 3295人阅读

摘要：，用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的事件。用选择器选中第二个，给它绑定事件，现在是显示的，它会在一秒钟之内慢慢的隐藏，实现淡出效果。，通过不透明度的变化来实现所有匹配元素的淡出效果。效果如下，，关闭页面上所有的动画。

jQuery操作之效果

效果操作一共分五类：1.基本，2.滑动，3.淡入淡出，4.自定义，5.设置

1. show()，hide()，toggle()

代码如下：

html代码：

   jQuery代码：
        $("p").show();            
            开始P是隐藏的，执行完这行代码，P显示

        $("p").hide();            
            现在的P标签是显示的，执行完这行代码P隐藏

        $("#btn1").click(function(){
            $("p").toggle("show");
        })
            给按钮绑定一个click事件，当P是现实的时候让它隐藏，如果P是隐藏的，那就让它显示

注释：show(),显示隐藏的匹配元素。
     hide()，隐藏显示的元素。
     toggle()，用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

slideDown()，slideUp()，slideToggle()

代码如下：

html代码：

jQuery代码：
    $("#btn1").click(function(){
            $("div").slideDown();
        });
           给id为btn1的按钮绑定click事件，当点击展开按钮的时候，div向下展开。

        $("#btn2").click(function(){
            $("div").slideUp();
        });
           给id为btn2的按钮绑定click事件，当点击展开按钮的时候，div向上收缩。

        $("#btn3").click(function(){
            $("div").slideToggle();
        });
            给id为btn3的按钮绑定click事件，当div是向下展开的时候就向上收缩，反之。
注释：slideDown(),向下展开。
     slideUp(),向上收缩。
     slideToggle(),通过高度变化来切换所有匹配元素的可见性。
效果如下：

fadeIn()，fadeOut()，fadeTo()，fadeToggle()

代码如下：

html代码：

jQuery代码：
    $("input").first().click(function(){
            $("div").fadeIn(1000);
        });
            用选择器选中第一个input，给它绑定click事件，div开始是隐藏的，它会在一秒钟之内慢慢的显示出来，
            实现淡入效果。

        $("input").eq(1).click(function(){
            $("div").stop().fadeOut(1000);
            //$("div").fadeOut(1000);
        });
            用选择器选中第二个input，给它绑定click事件，div现在是显示的，它会在一秒钟之内慢慢的隐藏，实现
            淡出效果。

        $("input").eq(2).click(function(){
            $("div").stop().fadeToggle(1000);
        })
            用选择器选中第三个input，给它绑定click事件，当div是显示的时候，让它淡出，反之，当div是隐藏的时候，
            让它淡入。

        $("input").eq(3).click(function(){
            $("div").stop().fadeTo(1000,0.5);
        })        
            用选择器选中第四个input，给它绑定click事件，设置淡入（淡出）的时间和透明度。

注释：fadeIn()，通过不透明度的变化来实现所有匹配元素的淡入效果。
     fadeOut()，通过不透明度的变化来实现所有匹配元素的淡出效果。
     fadeTo()，把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。
     fadeToggle()，通过不透明度的变化来开关所有匹配元素的淡入和淡出效果。
效果如下：

animate()，stop()，delay()

代码如下：

css代码：
    div{
        width:100px;
        height:100px;
        background:red;
    }

html代码：
    ST宋泽

jQuery代码：
    $("#btn1").click(function(){
            $("div").delay(2000).animate({
                "width":"300px",
                "height":"300px",
                "font-size":"4em"
            },5000,function(){
                console.log("动画完成")
            })
        });
            给id为btn1的按钮绑定click事件，当点击按钮的时候，延迟两秒钟，div的width，height，font-size会
            逐渐变成设置的这些值，两秒之后打印 “动画完成”。

        $("#btn2").click(function(){
            $("div").stop();
        })
            给id为btn2的按钮绑定click事件，当div正在做动画的时候，点击按钮，动画会停止。
注释：animate()，用于创建自定义动画的函数。
     stop()，停止所有在指定元素上正在运行的动画。
     delay()，设置一个延时来推迟执行队列中之后的项目。

效果如下：

jQuery.fx.off，jQuery.fx.interval

     jQuery.fx.off，关闭页面上所有的动画。
    jQuery.fx.interval，设置动画的显示帧速。

看完文章，是时候放松一下下了，嘻嘻！

GPU云服务器云服务器 jQuery打字效果 jquery等待效果 jquery动画效果 jquery放大效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87114.html

jQuery设计思想之理解篇

摘要：创建新元素的方法非常简单，只要把新元素直接传入的构造函数就行了七工具方法设计思想之六除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法。八事件操作设计思想之七，就是把事件直接绑定在网页元素之上。转自：阮一峰 2011年7月26日 http://www.ruanyifeng.com/blo... jQuery是目前使用最广泛的JavaScript函数库。据统计，全世界排名...

newsning 2019-08-20 16:12 评论0 收藏0
jQuery入门笔记之（七）插件

摘要：目前插件已超过几千种，由来自世界各地的开发者共同编写验证和完善。而对于开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。也就是说，插件也是代码，通过文件引入的方式植入即可。现在我们就完成了一个下拉菜单的插件。插件(Plugin)也成为 jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。目前 jQuery 插件已超过几千种，由来自世界...

defcon 2019-08-19 17:44 评论0 收藏0
jQuery入门笔记之（三）事件详解

摘要：可以传递三个参数表示一个或多个事件类型，比如。表示绑定到指定元素的处理函数。我们称它为简写事件。必须在中，并且使用作为事件触发元素，不然无效。和表示鼠标移入和移出的时候触发。按下返回按下返回和分别表示光标激活和丢失，事件触发时机是当前元素。转自个人博客在JavaScript 有一个非常重要的功能，就是事件驱动。如果你的网页需要与用户进行交互的话，就不可能不用到事件。它在页面完全加...

GitCafe 2019-08-19 17:17 评论0 收藏0
前端知识普及之页面加载

摘要：如果你的文件涉及操作，可以直接在里面添加回调函数，或者说基本上我们的文件都可以写在里面进行调用其实，这和我们将文件放在底部，在上面加以及异步加载文件的效果是一样一样的。如果大家想继续看下面的内容的话，有一个要求，就是回答我一个问题:你这样写过代码吗？ window.onload = function(){ $(.gravatar).on(click,function(){ ...

tianyu 2019-08-19 17:38 评论0 收藏0
PJAX，站点加速之翼

摘要：是一款可爱的小插件，将和浏览器的封装到一起，解决了单纯使用进行无刷新加载时对搜索引擎的不友好，并且节省了开支提高了浏览速度，明显地优化了用户体验。是提供的，是对浏览器历史对象的增强。 showImg(https://segmentfault.com/img/remote/1460000007640529?w=1008&h=569); pjax 是一款可爱的 jQuery 小插件，将 a...

QiuyueZhong 2019-06-27 14:55 评论0 收藏0