4.23.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. $(document).ready(function() {
  2. var $speech = $('div.speech');
  3. var defaultSize = $speech.css('fontSize');
  4. $('#switcher button').click(function() {
  5. var num = parseFloat($speech.css('fontSize'));
  6. switch (this.id) {
  7. case 'switcher-large':
  8. num *= 1.4;
  9. break;
  10. case 'switcher-small':
  11. num /= 1.4;
  12. break;
  13. default:
  14. num = parseFloat(defaultSize);
  15. }
  16. $speech.animate({fontSize: num + 'px'}, 'slow');
  17. });
  18. var $firstPara = $('p').eq(1);
  19. $firstPara.hide();
  20. $('a.more').click(function(event) {
  21. event.preventDefault();
  22. $firstPara.animate({
  23. opacity: 'toggle',
  24. height: 'toggle'
  25. }, 'slow');
  26. var $link = $(this);
  27. if ($link.text() == 'read more') {
  28. $link.text('read less');
  29. } else {
  30. $link.text('read more');
  31. }
  32. });
  33. $('div.label').click(function() {
  34. var paraWidth = $('div.speech p').outerWidth();
  35. var $switcher = $(this).parent();
  36. var switcherWidth = $switcher.outerWidth();
  37. $switcher
  38. .css({position: 'relative'})
  39. .fadeTo('fast', 0.5)
  40. .animate({
  41. left: paraWidth - switcherWidth
  42. }, {
  43. duration: 'slow',
  44. queue: false
  45. })
  46. .fadeTo('slow', 1.0)
  47. .slideUp('slow')
  48. .queue(function(next) {
  49. $switcher.css({backgroundColor: '#f00'});
  50. next();
  51. })
  52. .slideDown('slow');
  53. });
  54. $('p').eq(2).css('border', '1px solid #333');
  55. $('p').eq(3).css('backgroundColor', '#ccc').hide();
  56. });