学习笔记:《jQuery基础教程》第四版第四章课后练习——样式与动画

原创 2015年11月19日 15:39:19

1、修改样式表,一开始先隐藏页面内容,当页面加载后,慢慢地淡入内容。

$(document).ready(function() {
    $('body').css('display', 'none');
    $('body').fadeIn(1500);//自行设置时间
});

2、在鼠标悬停到段落上面时,给段落应用黄色背景。

$(document).ready(function() {
    $('p').mouseover(function(){
         $(this).css('backgroundColor', 'yellow');
    });//当鼠标移动到段落上时段落背景应用黄色。
    $('p').mouseout(function(){
         $(this).css('backgroundColor', 'white');
    });//当鼠标移出段落上时段落背景应用白色。
});

3、单击标题(<h2>)使其不透明度变为25%,同时添加20px的左外边距,当这两个效果完成后,把讲话文本变成50%的不透明度。

$(document).ready(function() {
    $('h2').click(function(){
        $(this)
            .fadeTo('slow', 0.25)
            .animate({
              paddingLeft: '+=200' + 'px'//或者paddingLeft: '+=200px'
            },{
              duration: 'slow',
              queue: false
            })
            .queue(function(next){
              $('div.speech').fadeTo('slow', 0.5)
            });
    });
});

4、挑战:按下方向键时,使样式转换器向相应的方向平滑移动20像素;四个方向键的键码分别是37(左)、38(上)、39(右)、40(下)。

  var key_left = 37;
  var key_up = 38;
  var key_right = 39;
  var key_down = 40;
  var $switcher = $('#switcher');
  $switcher.css('position', 'relative');
  $(document).keyup(function(event){
    switch(event.which){
      case key_left:
        $switcher
            .animate({
              left: '-=20px'
            },{
              duration: 'fast'
            })
        break;
      case key_up:
        $switcher
            .animate({
              top: '-=20px'
            },{
              duration: 'fast'
            })
        break;
      case key_right:
        $switcher
            .animate({
              left: '+=20px'
            },{
              duration: 'fast'
            })
        break;
      case key_down:
        $switcher
            .animate({
              top: '+=20px'
            },{
              duration: 'fast'
            })
    }
  });

效果请点击

版权声明:本文为博主原创文章,未经博主允许不得转载。

学习笔记:《jQuery基础教程》第四版第二章课后练习

学习笔记——《jQuery基础教程》第四版第二章课后练习最近抽时间系统的学习下jQuery相关知识,看看《jQuery基础教程》。顺便把课后练习的代码整理发上来看看。 给位于嵌套列表第二个层次的所有<...
  • la413972057
  • la413972057
  • 2015年10月08日 19:48
  • 1335

第四章 jQuery 样式与动画

通过jQuery可以轻松地为页面操作添加简单的视觉效果,甚至能创建更精致的动画 // 取得单个属性的值 .css('property') //返回 "value" //取得多个属性的值 .css ( ...
  • yana_loo
  • yana_loo
  • 2016年12月20日 17:09
  • 136

计算机操作系统(第四版)课后习题答案(完整版)

第一章 1.设计现代OS的主要目标是什么? 答:(1)有效性 (2)方便性 (3)可扩充性 (4)开放性 2.OS的作用可表现在哪几个方面? 答:(1)OS作为用户与计算机硬件系统之间的接口 ...
  • zhang_hongli_li
  • zhang_hongli_li
  • 2015年09月21日 10:46
  • 115425

算法第四版 课后习题答案

算法第四版 Eclipse EOF
  • fuckluy
  • fuckluy
  • 2016年03月28日 17:07
  • 12445

jQuery 之 设置页面内容和属性(七)

设置内容 - text()、html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的...
  • u013630349
  • u013630349
  • 2016年07月19日 18:18
  • 549

JQuery实现HTML元素隐藏和显示

让我们来模仿一下淘宝网当你搜索某个商品的时候,的那种显示全部品牌和显示部分品牌的功能。 首先我们来理清一下思路; 1:一开始需要先隐藏需要隐藏的元素 2:你需要通过jquery获取需要在开始显示的时候...
  • notsaltedfish
  • notsaltedfish
  • 2016年08月14日 20:35
  • 790

jQuery效果之隐藏与显示、淡入淡出、滑动、回调

1. 隐藏与显示 通过 jQuery,可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,可以使用 toggle() 方法来切换 hide() 和 show() 方法。 2. ...
  • miao_9
  • miao_9
  • 2017年06月17日 10:03
  • 1178

jQuery动画-淡入和淡出

hide()、show()、slideDown()、slideUp()是通过 display:none/block来实现的;fadeOut() 是通过透明度的方法,opacity=0,这个动画只调整元...
  • QQ80583600
  • QQ80583600
  • 2017年01月13日 13:05
  • 1096

jQuery的load方法设计动态加载及解决被加载页面js

上面提了下jQuery的load方法,感觉这需要记录下: jQuery load()方式是一个简单强大的ajax方法。 load()从服务器获取数据,并把返回的数据放入被选元素中。 语法 ...
  • qq_32447321
  • qq_32447321
  • 2017年12月12日 10:59
  • 200
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习笔记:《jQuery基础教程》第四版第四章课后练习——样式与动画
举报原因:
原因补充:

(最多只允许输入30个字)