Home

will this work with old jquery

March 12, 2008 - 1:04pm — Anonymous
  1.        <style type="text/css">
  2. * {
  3.     padding: 0;
  4.     margin: 0;
  5. }
  6. div {
  7.     width: 40em;
  8.     overflow: hidden;
  9. }
  10. ul {
  11.     list-style: none;
  12.     width: 200%;
  13. }
  14.     ul li {
  15.         background: red;
  16.         float: left;
  17.         width: 10em;
  18.         height: 8em;
  19.     }
  20.     ul li.second { background: green; }
  21.     ul li.third { background: blue; }
  22.     ul li.fourth { background: orange; }
  23.         </style>
  24.  
  25.         <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  26.         <script type="text/javascript">
  27. (function($) {
  28.     $.fn.midnightBicycleMystery = function(options) {
  29.         var options = $.extend({
  30.             normalWidth: '10em',
  31.             bigWidth: '16em',
  32.             smallWidth: '8em',
  33.             duration: 200
  34.         }, options)
  35.  
  36.         return this.each(function() {
  37.             $('li', this).bind('mouseenter', function(e) {
  38.                 var self = $(this),
  39.                     sibs = self.siblings();
  40.  
  41.                 self.add(sibs).stop();
  42.  
  43.                 self.animate({
  44.                     width: options.bigWidth
  45.                 }, options.duration);
  46.  
  47.                 sibs.animate({
  48.                     width: options.smallWidth
  49.                 }, options.duration);
  50.             })
  51.             .bind('mouseleave', function(e) {
  52.                 var self = $(this),
  53.                     sibs = self.siblings();
  54.  
  55.                 self.add(sibs).stop();
  56.  
  57.                 sibs.animate({
  58.                     width: options.normalWidth
  59.                 }, options.duration);
  60.  
  61.                 self.animate({
  62.                     width: options.normalWidth
  63.                 }, options.duration);
  64.             })
  65.         });
  66.     }
  67. })(jQuery)
  68.  
  69. jQuery(function() {
  70.     $('div.foo ul').midnightBicycleMystery();
  71. });
  72.         </script>