Jquery的几个方法使用.

撒哈拉的绿洲

于 2014-04-08 19:07:26 发布

阅读量530

点赞数

CC 4.0 BY-SA版权

分类专栏： JS HTML 文章标签： jquery html

本文链接：https://blog.youkuaiyun.com/u011550635/article/details/23201971

JS 同时被 2 个专栏收录

28 篇文章

订阅专栏

HTML

8 篇文章

订阅专栏

本文介绍了如何使用jQuery库实现动画效果，包括使用delay方法控制延迟时间，not选择器筛选元素，以及通过slideUp方法实现元素的上滑动效果。通过实例演示了如何创建动态网页交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.延迟delay(time)方法.参数:时间.

2.not选择器

3.向上sileUp

复制代码运行可以出现效果:

注:加上jquery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <style type="text/css">
        #test1{
            background: red;
            width: 100%;
            height: 100%
        }
        #test2{
            background: gray;
            width: 100%;
            height: 100%
        }
        html,body,#test{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #test{
            position: absolute;
            top:0;
            left: 0;
        }
        #test3{
            position:relative;
            width: 30px;
            height: 30px;
            background: #000000;
            left:500px;
        }
        #click1{
            position: absolute;
            top:30px;
        }
    </style>
    <script type="text/javascript" >
        //delay  延迟  slideUp(向上滑动)
       setTimeout(function(){
           $("#test1").delay(1000).slideUp(1000)
       },1)
        //not选择器
        function move(){
           $("#test3:not(:animated)").animate({left:"+=100px"},1000);
        }
    </script>
</head>
<body>
     <div id="test" >
         <div id="test1"></div>
         <div id="test2"></div>
     </div>
     <div id="test3"></div>
     <button id="click1" onclick="move()">移动方块</button>
</body>
</html>