jQuery的效果函数

jQuery有效果函数
方法                        描述
animate()             对被选元素应用“自定义”的动画
clearQueue()             对被选元素移除所有排队的函数（仍未运行的）
delay()             对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()             运行被选元素的下一个排队函数
fadeIn()             淡入被选元素至完全不透明
fadeOut()             淡出被选元素至完全不透明
fadeTo()             把被选元素减弱至给定的不透明度
hide()                 隐藏被选的元素
queue()             显示被选元素的排队函数
show()                 显示被选的元素
slideDown()             通过调整高度来滑动显示被选元素
slideToggle()             对被选元素进行滑动隐藏和滑动显示的切换
slideUp()             通过调整高度来滑动隐藏被选元素
stop()                 停止在被选元素上运行动画
toggle()             对被选元素进行隐藏和显示的切换

 

animate()在jquery中作为一个方法,可用于创建动画效果，jquery中的animate()方法让那个页面增加了很好的视觉效果

<div class="wrap">

  <img src="images/s1.jpg" alt="photo" />

  <div class="cover">

    <h3>尽快来房间爱离开风口浪尖</h3>

    <p>发货空间按恢复健康等哈就快递费还看见爱会尽快恢复可骄傲的划分空间的及刻录机</p>

    <p><a href="#">风华绝代</a></p>

  </div>

</div>

 

CSS

我们需要用CSS将.wrap排成行，并且要将.cover覆盖层隐藏一部分，当鼠标滑上去是通过调用jquery才显示出来。

.wrap{position:relative; float:left; width: 200px; height:200px; margin:5px;

background:#e8f5fe; overflow:hidden;}

.wrap img{position:absolute; top:0; left:0}

.wrap h3{line-height:30px; font-size:14px; color:#fff}

.wrap p{line-height:20px}

.cover{position:absolute; background:#000; height:120px; width:100%;

padding:3px; top:170px; }

 

jQuery

首先我将覆盖层的透明度设置为0.8，然后当鼠标滑上图片时，使用hover函数来调用animate动画。

$(function(){

  $(".cover").css("opacity",.8);

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

    $(".cover", this).stop().animate({top:"80px"},{queue:false,duration:160});

  },function(){

    $(".cover", this).stop().animate({top:"170px"},{queue:false,duration:160});

  });

});

 

切换 <p> 元素的显示与隐藏状态：

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

定义和用法

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

 

语法

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