jQuery学习笔记4——A flipboard 剪贴板实例

开始之前：jQuery文档(http://docs.jquery.com/) ， js在线IDE(https://jsfiddle.net/)，教程：(http://w3school.com.cn/)

slideDown ——下滑

slideUp —— 向上滑

fadeIn —— 淡入

fadeOut —— 淡出

animate ——动画

        takes two parameters:
        1. A set of CSS properties,
        2. A time duration over which to change them.

//*********关于slideDown和slideUp热身小程序********//
//=========点击从上往下出现==========
var main = function() {
  $(".btn").click(function(event) {
    $(".container").hide();
    $(".container").slideDown(900);
  });
};

$(document).ready(main);

//=========点击从下往上出现==========

var main = function() {
  $(".btn").click(function(event) {
    $(".container").show ();
    $(".container").slideUp(1100);
  });
};

$(document).ready(main);

//===================================

回顾一下next的用法：

用一个经典的click响应滑动显示slides的实例来展示：

    $('.arrow-next').click(function(){//select
        var currentSlide = $('.active-slide');<span style="white-space:pre">	</span>//declare two boxes, current and next
        var nextSlide = currentSlide.next(); //the next
        if (nextSlide.length ===0)//if the nextSlides point to the end
            nextSlide = $('.slide').first(); //make it point to the first
        currentSlide.fadeOut(600);<span style="white-space:pre">	</span>//current's actions
        nextSlide.fadeIn(600);<span style="white-space:pre">		</span>// next's actions
        currentSlide.removeClass('active-slide');//注意这里没有".", switch the next to current
        nextSlide.addClass('active-slide'); //switch the next to current.
    });