jQuery学习笔记(3.0)

滑动效果

slideDown()  //下拉

$("div").slideDown();

slideUp()  //上拉

$("div").slideUp();   //里面可以加参数,就是速度毫秒数,如1000,一秒

$(".nav>li").mouseover(function(){  //鼠标经过下拉

$(this).children("ul").slideDown(200)

})

$(".nav>li").mouseover(function(){  //鼠标离开上拉

$(this).children("ul").slideUp(200)

})

hover([over,] out)

over:鼠标经过

out:鼠标离开

$(".nav>li").hover(function(){  

$(this).children("ul").slideDown(200)

},function(){

$(this).children("ul").slideUp(200)

})

//改进代码

事件切换hover 如果只写一个函数,那么鼠标经过和离开都是执行同一个函数

$(".nav>li").hover(function(){  

$(this).children("ul").slideToggle(200)

})

当多次触发动画时,就造成多个动画或者效果排队执行。

停止排队

stop()

//改进代码

$(".nav>li").hover(function(){  

//stop方法必须写在动画的前面

$(this).children("ul").stop().slideToggle(200)

})

淡入淡出

fadeIn([speed],[easing],fn)

$(function(){

$("button").eq(0).click(function(){

$("div").fadeIn(1000)})

})

$("button").eq(1).click(function(){

$("div").fadeOut(1000)})

})

$("button").eq(2).click(function(){

$("div").fadeToggle(1000)})

})

渐进方式调整到指定的不透明度

fadeTo([speed].opacity,[easing],[fn])

opacity:透明度必须写,取值0-1之间。

speed也要写。

$("button").eq(3).click(function(){

$("div").fadeTo(1000,0.5)

})

高亮案例

当鼠标放在li上,兄弟的透明度降低。

使用fadeTo

$(function(){

$(".wrap li").hover(function(){

$(this).siblings().stop().fadeTo(400,0.5)},function(){

$(this).siblings().stop().fadeTo(400,1)

})

})

自定义动画animate

animate(params,[speed],[easing],[fn])

params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不带引号,如果是符合属性需要采用驼峰命名。

$(function(){

$("button").click(function(){

$("div").animate({

left:200,

top:300,

opacity:.4

},500)

})})

相关推荐

  1. 【前端】JQuery学习笔记

    2024-04-12 04:18:04       52 阅读
  2. jQuery学习笔记

    2024-04-12 04:18:04       41 阅读
  3. jQuery学习笔记

    2024-04-12 04:18:04       26 阅读
  4. jQuery学习笔记(1.0)

    2024-04-12 04:18:04       40 阅读
  5. jQuery学习笔记(3.0)

    2024-04-12 04:18:04       35 阅读
  6. jQuery学习笔记(2.0)

    2024-04-12 04:18:04       42 阅读
  7. jquery笔记

    2024-04-12 04:18:04       47 阅读
  8. jQuery笔记 02

    2024-04-12 04:18:04       35 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-12 04:18:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-12 04:18:04       101 阅读
  3. 在Django里面运行非项目文件

    2024-04-12 04:18:04       82 阅读
  4. Python语言-面向对象

    2024-04-12 04:18:04       91 阅读

热门阅读

  1. sql注入笔记整理

    2024-04-12 04:18:04       39 阅读
  2. 无过错方请求离婚损害赔偿的权利

    2024-04-12 04:18:04       40 阅读
  3. redis缓存雪崩,缓存穿透

    2024-04-12 04:18:04       42 阅读
  4. UVA230 Borrowers 图书管理系统 解题报告

    2024-04-12 04:18:04       39 阅读
  5. Python:闭包

    2024-04-12 04:18:04       45 阅读
  6. Web蓝桥杯刷题记录——燃烧你的卡路里

    2024-04-12 04:18:04       37 阅读
  7. oracle全量、增量备份

    2024-04-12 04:18:04       39 阅读
  8. 【Python】Python中大文件切割的艺术

    2024-04-12 04:18:04       41 阅读
  9. leetcode解题思路分析(一百五十五)1352 - 1358 题

    2024-04-12 04:18:04       37 阅读
  10. 0411代码,备战蓝桥杯基础数据结构

    2024-04-12 04:18:04       34 阅读