4.26.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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)
  55. .css('border', '1px solid #333')
  56. .click(function() {
  57. var $clickedItem = $(this);
  58. $clickedItem.next().slideDown('slow', function() {
  59. $clickedItem.slideUp('slow');
  60. });
  61. });
  62. $('p').eq(3).css('backgroundColor', '#ccc').hide();
  63. });