博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery笔记(效果)
阅读量:5107 次
发布时间:2019-06-13

本文共 1607 字,大约阅读时间需要 5 分钟。

显示/隐藏:

$(selector).hide(speed, function()):隐藏

$(selector).show(speed, function()):隐藏

$(selector).toggle(speed, function()):显示/隐藏切换

淡入/淡出:

$(selector).fadeIn(speed, function()):淡入,必须先把元素隐藏掉(display:none)

$(selector).fadeOut(speed, function()):淡出,即慢慢的隐藏掉

$(selector).fadeToggle(speed, function()):淡入/淡出切换

$(selector).fadeTo(speed,opacity,function());:方法允许渐变为给定的不透明度(值介于 0 与 1 之间)

滑动:

$(selector).slideDown(speed,function()):向下滑动

$(selector).slideUp(speed,function()):向上滑动

$(selector).slideToggle(speed,function()):切换

动画:

$(selector).animate({

params},speed,function()):当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。同时,色彩动画并不包含在核心 jQuery 库中。与css3动画略有不同的是个人觉得比较好控制,不会回到原来的状态。

  可以取相对值:

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

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

使用预定义值:hide(),show(),toggle()

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

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

使用队列:

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

  var div=$("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");
}); 

停止动画:

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

$(
selector).stop(
stopAll,goToEnd):可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此,默认地,stop() 会清除在被选元素上指定的当前动画。
 
方法链接:
采用方法链接的话,浏览器就不必多次查找相同的元素。当你需要链接一个动作,您只需简单地把该动作追加到之前的动作上。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

转载于:https://www.cnblogs.com/jlj9520/p/4843840.html

你可能感兴趣的文章
什么是CPU平均负载
查看>>
面试常问题
查看>>
解析LayoutSubviews
查看>>
Scriptable Render Pipeline
查看>>
Python之操作Excel
查看>>
openCV读取XML文件基本操作
查看>>
PyDev for Eclipse 简介
查看>>
四、业务处理模型
查看>>
CODE[VS] 1262 不要把球传我
查看>>
反射---hasattr、getattr、setattr、delattr
查看>>
BZOJ 4407 于神之怒加强版
查看>>
传递对象与返回对象不是两回事
查看>>
C#注释标签的练习
查看>>
BitSet源码
查看>>
Word 2010中利用尾注添加参考文献(论文必备)
查看>>
Java 调用 Javascript 函数的范例
查看>>
With...End With 语句
查看>>
[Flex] ButtonBar系列——flex3 皮肤和外观设置
查看>>
XML外部实体注入漏洞(XXE)
查看>>
保存页面数据的场所----Hidden、ViewState、ControlState
查看>>