Solutions to <Learning jQuery> Chapter 4

1.  Alter the stylesheet to hide the contents of the page initially. When the page is loaded, fade in the contents slowly.

2.  Give each paragraph a yellow background only when the mouse is over it.

3.  Make a click of the title (<h2>) simultaneously make it fade to 25% opacity and get a left margin of 20px, then when this is complete, fade the speech text to 50% opacity.

4.  Challenge: React to presses of the arrow keys by smoothly moving the switcher box 20 pixels in the corresponding direction. The key codes for the arrow keys are: 37(left),  38(up), 39(right), and 40(down).

CSS文件：

body {
  font: 62.5% Verdana, Helvetica, Arial, sans-serif;
  color: #000;
  background: #fff;
  display:none;
}

JS文件：

$(document).ready(function(){
	//practice
	var switcher=$('.speech');
	var num=parseFloat(switcher.css('font-size'));
	var defaultSize=num;
	$('#switcher button').click(function(event){
		switch(this.id){
			case 'switcher-large':
			num*=1.4;
			break;
			case 'switcher-small':
			num/=1.4;
			break;
			default:
			num=defaultSize;
			break;
		}
		switcher.animate({'font-size':num+'px'},'fast');
	});
	$('p').eq(1).hide();
	var firstPara=$('p').eq(1);
	$('.more').click(function(event){
		firstPara.slideToggle('slow');
		var hidden=firstPara.is(':hidden');
		var link=$(this);
		if(link.text()=='read more'){
			link.text('read less');
		}else{
			link.text('read more');
		}
		return false;
	});
	$('div.label').click(function(){
		var paraWidth=$('div.speech p').outerWidth();
		var textDiv=$(this).parent();
		var textWidth=textDiv.outerWidth();
		//textDiv.css({'position':'relative'});
		//textDiv.animate({'border-width':'5px','left':paraWidth-textWidth,'height':'+=20px'},'slow');
		// textDiv.animate({'border-width':'5px'},'slow');
		// textDiv.animate({'left':paraWidth-textWidth},'slow');
		// textDiv.animate({'height':'+=20px'},'slow');
		textDiv.css({'position':'relative'})
			.fadeTo('slow',0.5)
			.animate({'left':paraWidth-textWidth},{'speed':'slow','queue':false})
			.fadeTo('slow',1.0)
			.slideUp('slow',function(){
				textDiv.css({'background-color':'red'});
				})
			.slideDown('slow');
	});
	$('p').eq(2).css({'border':'1px solid #333'});
	$('p').eq(3).css({'background-color':'#ccc'}).hide();
	$('p').eq(2).click(function(){
		$(this).next().slideDown('slow',function(){
			$(this).prev().slideUp('slow');
		});
	});
	
	//solutions begin here
	//1
	$('body').fadeIn('slow');
	//2
	//hints:
	//we use $('p').eq(3).css() previously
	//because .css() change the inline stylesheet, which has higher priority than external css
	//so .toggleClass() won't make sense here
	var oldColor;
	$('p').mouseover(function(){
		oldColor=$(this).css('background-color');
		$(this).css({'background-color':'yellow'});
	});
	$('p').mouseout(function(){
		$(this).css({'background-color':oldColor});
	});
	//3
	$('h2').click(function(){
		$(this).fadeTo('slow',0.25,function(){
			$('.speech').fadeTo('slow',0.5);})
		.animate({'margin-left':'20px'},{'speed':'slow','queue':false}
		);
	});
	//4
	var textDiv=$('#switcher');
	textDiv.css({'position':'relative'});
	$(document).keypress(function(event){
		switch(event.keyCode){
			//left
			case 37:
				textDiv.animate({'left':'-=20px'},100);
				break;
			//up
			case 38:
				textDiv.animate({'top':'-=20px'},100);
				break;
			//right
			case 39:
				textDiv.animate({'left':'+=20px'},100);
				break;
			//down
			case 40:
				textDiv.animate({'top':'+=20px'},100);
				break;
			default:
				break;
		}
	});
});