jQuery的效果

jQuery的效果

jQuery的效果一共有5类，接下来我们就看看都有什么？？？？

1. 基本
2. 滑动
3. 淡入淡出
4. 自定义
5. 设置

---

接下来看看基本都有哪几种？？？

基本的html代码！！！

<p style="display: none">Hello</p>
<input type="button" id="btn" value="tooggle">

基本的jQuery代码！！！

<script type="text/javascript">
    //显示隐藏的匹配元素。
    $("p").show("slow");
    //隐藏显示的元素
    $("p").hide();
    //如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
    $("p").toggle();  	
    //用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
    function a(){
    	alert("test1")
    }
    function b(){
    	alert("test2")
    }
    function c(){
    	alert("test3")
    }
    $("#btn").click().toggle(a,b,c)
</script>

---

接下来看看滑动都有哪几种？？？

滑动的html代码！！！

<div style="100px;height:100px;background:red;display:none"></div>
<input type="button" id="btn" value="向下">
<input type="button" id="btn1" value="向上">
<input type="button" id="btn2" value="切换">

滑动的jQuery代码！！！

<script type="text/javascript">
    //通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
    $("#btn").click(function(){
      $("div").slideDown();
    });
    //通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
    $("#btn1").click(function(){
      $("div").slideUp();
    });
    //通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
    $("#btn2").click(function(){
      $("div").slideToggle();
    });
</script>

---

接下来看看淡入淡出都有哪几种？？？

淡入淡出的html代码！！！

<div style="100px;height:100px;background:red;display:none"></div>
<input type="button" id="btn" value="淡入">
<input type="button" id="btn1" value="淡出">
<input type="button" id="btn2" value="切换">
<input type="button" id="btn3" value="fadeTo">

淡入淡出的jQuery代码！！！

<script type="text/javascript">
    //通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
    $("#btn").click(function(){
    	$("div").fadeIn(3000);
    });
    //通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
    $("#btn1").click(function(){
    	$("div").fadeOut(3000);
    });
    //通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
    $("#btn2").click(function(){
    	$("div").fadeToggle(3000);
    });
    //把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
    $("#btn3").click(function(){
    	$("div").fadeTo("slow",0.5);
    });
</script>

---

接下来看看自定义都有哪几种？？？

自定义的html代码！！！

<div style="100px;height:100px;background:red">姜筱妍</div>
<input type="button" name="" value="开始" id="btn">
<input type="button" name="" value="停止" id="btn1">

自定义的jQuery代码！！！

<script type="text/javascript">
    //animate用于创建自定义动画的函数。
    //delay设置一个延时来推迟执行队列中之后的项目。
    $("#btn").click(function(){
      $("div").delay(3000).animate({ 
        "width": "500px",
        "height": "300px", 
        "fontSize": "5em",
      }, 3000 );
    });
    //stop停止所有在指定元素上正在运行的动画。
    $("#btn1").click(function(){
      $("div").stop();
    });
</script>

自定义的动画效果！！！

---

接下来看看设置都有哪几种？？？

jQuery.fx.off

关闭页面上所有的动画。

jQuery.fx.interval

设置动画的显示帧速。

---

亲们几天的代码学的怎么样！！！我们来开心一下吧！！！