jQuery效果

来源：互联网发布：凯里欧文体测数据编辑：程序博客网时间：2024/06/09 18:35

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>

阅读全文

0 0