jquery基本效果

最新推荐文章于 2024-07-19 12:58:53 发布

cpf2016

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量317

点赞数

分类专栏： jquery 文章标签： javascript ViewUI

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

（1）隐藏与显示

1.简单隐藏与显示

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

2.隐藏与显示切换

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

3.隐藏与显示的速度

以上3个方法都可以设置隐藏和显示的速度，如

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

其中的speed可以取fast、slow或者毫米数
callback是隐藏或显示完成之后的回调函数

$("button").click(function(){
  $("p").hide(1000);
});

（2）淡入淡出

1.淡入（也就是慢慢显示）

语法格式如下：

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

speed可取fast、slow或毫秒数，callback是显示之后的回调函数

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>

<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

2.淡出（也就是慢慢隐藏）

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

3.淡入淡出切换

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

4.不完全淡出

可以通过调整透明度来实现

格式如下：

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

其中opacity为透明度，为0-1之间

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

（3）滑动

1.向下滑动（实际上就是显示）

语法：

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

speed为显示的速度

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

2.向上滑动（实际上就是隐藏）

$("#flip").click(function(){
  $("#panel").slideUp();
});

3.向上向下滑动切换

$("#flip").click(function(){
  $("#panel").slideToggle();
});

（4）动画

1.简单使用

语法：

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

params中是最终的css属性

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

注意：默认的html位置是不能改变的，所以必须要将css position属性设置为relative\fixed\absolute

2.操作多个属性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

3.使用相对值
也就是相对于当前值的值

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

4.使用队列功能
也就说动画挨个执行

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

5.终止动画
语法

$(selector).stop(stopAll,goToEnd);

stopAll：也就是是否清除这个动画后面所有的动画，默认是false，即只停止当前的，后面继续执行
gotoEnd：是否立即完成动画，默认为false

cpf2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery基本效果

（1）隐藏与显示 1.简单隐藏与显示$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });});如果你点击“隐藏”
复制链接

扫一扫