jQuery效果

最新推荐文章于 2024-09-24 09:00:00 发布

Greedy_Tobby

最新推荐文章于 2024-09-24 09:00:00 发布

阅读量161

点赞数

分类专栏： JavaScript 文章标签： jQuery

本文链接：https://blog.csdn.net/tomsteven1441/article/details/78673925

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery 效果：

隐藏与现实：

//jQuery toggle()

//可以使用toggle（）方法来控制方法来切换hide()和show()方法。

$(document).ready(function () {
   $("button").click(function () {
       $("p").toggle()
   })
})

可以计入speed参数：slow或者fast、毫秒

$(selector).toggle(speed,callback);

jQuery fadeOut() 方法用于淡出可见元素

jQueryfadeToggle() 方法可以在 fadeIn()与 fadeOut()方法之间进行切换。

如果元素已淡出，则 fadeToggle()会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle()会向元素添加淡出效果。

$(selector).fadeTo(speed,opacity,callback);

必需的speed 参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

fadeTo() 方法中必需的opacity参数将淡入淡出效果设置为给定的不透明度（值介于0与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

$(document).ready(function () {
    $("button").click(function () {
         $("p").fadeTo("slow",0.3,function () {
         $(this).html("淡入")
      })
    })
})

淡入与淡出

jQuery 拥有以下滑动方法：

· slideDown()

· slideUp()

· slideToggle()

自定义动画： //主要参数中没有引号

· $(selector).animate({params},speed,callback);

· 可以用 animate()方法来操作所有 CSS属性吗？

· 是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate()时，必须使用 Camel标记法书写所有的属性名，比如，必须使用 paddingLeft而不是 padding-left，使用 marginRight而不是 margin-right，等等。

· 同时，色彩动画并不包含在核心 jQuery库中。

使用相对值

$("div").animate({left:'250px',height:'+=150px',width:'+=150px'});

使用预定义的值

$("div").animate({height:'toggle'});

使用队列功能

$("button").click(function(){vardiv=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");});

jQuery链：

有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

//利用python web--Django来测试的。

{% load staticfiles %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script>
        $(document).ready(function () {
            $(".btn").click(function () {
               $('h1').css("color","red").fadeToggle(1000,function () {
                    $(this).html("no handsome!")
                })
            })
        })
    </script>

</head>
<body>
<button class="btn">按钮</button>
<h1>tangwei is a handsome boy!</h1>
</body>
</html>