練習4:<br>JQ控制物件方法介紹

(二)加入事件

【jQuery 效果- 隱藏和顯示】參考【click事件】參考【jQuery 事件 方法】參考

//btn10====10.click,show,hide
	$('button:eq(9)').click(function() {
		//$('li:last-child').hide();
		//$('li:last-child').show();		若為show,則需在CSS中display:none
		$('li:last-child').toggle(1000);			//左上角顯示隱藏
	});

【jQuery 效果 – 淡入淡出】參考

//btn11====11.click,fadeIn,fandOut
	$('button:eq(10)').click(function() {
		$('li:eq(6)').fadeToggle(1000);		//若項目下方有內容,則突然折疊
	});

【jQuery 效果 – 滑动】參考

//btn12====12.click,slideUp,slideDown
	$('button:eq(11)').click(function() {
		$('li:eq(6)').slideToggle(1000);	//上下折疊
	});

【jQuery hover() 方法】參考 、【stop()方法】參考【stop()方法】本網連結

//btn13====13.hover 
	//說明hover(1)分為滑入/滑出(2)動畫後執行工作(3)何謂stop(4)$(this)
	$('button:eq(12)').hover(function() {
		$('li:last-child').slideUp(1000);
		}
	, function() {
		//$('li:last-child').fadeIn(1000);
		$('li:last-child').stop(true, true).slideDown('1000', function() {
			$(this).css({
				background: '#0A0E51',
				color: '#FFFFFF'
			});	//this css End
		});	//slideDown End
	});