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

最新推荐文章于 2017-07-06 21:16:15 发布

Sonictl

最新推荐文章于 2017-07-06 21:16:15 发布

阅读量601

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sonictl/article/details/45146307

本文介绍了使用jQuery实现的flipboard风格剪贴板效果，包括slideDown、slideUp、fadeIn、fadeOut和animate等动画方法的实战应用。通过示例详细展示了如何在指定时间内改变CSS属性，实现平滑的视觉过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始之前：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.
    });