var changeColorCss = function() {
   $('#ex3_1 span').css('color', '#911');
}
var changeManyCss = function() {
   $('#ex3_1 span').css({
		  color: '#23b',
		  display: 'block',
		  width: '140px',
		  padding: '12px',
		 'background-color' : '#cce'
   });
}

var showDiv = function() {
   $('div.ex2').show(400, function() {
	  $('div.ex2 span').css('font-weight','bold');
	});
}

var hideDiv = function() {
   $('div.ex2').hide('medium', function() {
	  $('div.ex2 span').css('font-weight','normal');
	});
}

var doAnimateSimple = function() {
	$('div.ex3').animate({
		  color: '#23b',
		  display: 'block',
		  width: '140px',
		  padding: '12px',
		 'background-color' : '#cce'
   }, 2400);
		
}

$(document).ready(function() {
	
   $('#btn-311').click(changeColorCss); 
   $('#btn-312').click(changeManyCss); 
   $('#btn-321').click(showDiv); 
   $('#btn-322').click(hideDiv); 
   $('#btn-331').click(doAnimateSimple); 	
})

/*
<li><strong>easing</strong>: ל-jquery קיימת ספריית אפקטים המשפיעים על הקצב היחסי בו מתבצעת האנימציה, לדוגמה - התחלה מהירה וסיום איטי, תנודות קטנות והולכות בסיום האנימציה, ועוד. פרמטר זה מציין את סוג האפקט הרצוי (אופציונלי)</li>
<li><strong>callback</strong>: פונקציה לביצוע בסיום האנימציה (אופציונלי).</li>
</ol>
*/