[jQuery] Re: help to simplify code

Karl Swedberg Sun, 20 Sep 2009 08:51:10 -0700

Here is another way you could do it:

var bgColors = {
  services: '#8ac2b7',
  vision: '#9e97ca',
  approach: '#e5b120',
  team: '#cf1858'
};


var $navigation = $('#navigation');

$('#bodycopy').children()
  .bind('mouseenter', function() {
    $(this).siblings().stop().fadeTo('slow', .2);

$navigation.stop().animate({backgroundColor: bgColors[this.id]},500);

  })
  .bind('mouseleave', function() {
    $(this).siblings().stop().fadeTo('slow', 1);
    $navigation.stop().animate({backgroundColor: '#404040'}, 500);
  });


$navigation.find('a')
  .bind('mouseenter mouseleave', function(event) {
    if (this.id.indexOf('nav') === 0) {
      var id = '#' + this.id.replace(/^nav/,'');
      $(id).trigger(event.type);
    }
  });


--Karl

____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Sep 20, 2009, at 10:51 AM, alienfactory wrote:


i was asking about javascript/jquery not html 101 but that is cool
though and yes that was snarky. LOL

No worries at least you are trying to help thanks

I dont see where you are fading the addtional div see link above for
sample
you focused on the navigavtion but i have 4 divs when mousing over one
of them the other divs should fadeout

How do you select additional div.

Many Thanks



On Sep 20, 4:17 am, "ryan.j" <ryan.joyce...@googlemail.com> wrote:

for fear of offending you further, i apologise in advance for posting

code. personally i'd be tempted to call 'test1(this)' on themouseover

and mouseout events and have it do something like...

function test1(t) {
                var c = $(t).css('background-color')
                var o = '1'
                if ( !$(t).hasClass('nav-active') )
                        o = '.2'
                $('.nav-active').removeClass('nav-active')

                $(t).addClass('nav-active')
                        .siblings()
                        .stop()
                        .fadeTo('slow', o);

                $('#navigation').stop()
                        .animate({ backgroundColor: c }, 500);

}

this is literally back-of-fagpacket code, so clearly it could be
improved and/or tested. assigning a class just to track the opacity
state probably isn't the greatest idea ever but it does mean you have
easy access to the currently selected menu item.

On Sep 20, 11:25 am, "ryan.j" <ryan.joyce...@googlemail.com> wrote:

i wasn't being snarky mate, just that you phrased your questionlike a
homework assignment!

besides, i thought i /was/ answering your question tbh :S

On Sep 20, 3:14 am, alienfactory <alienfacto...@gmail.com> wrote:

wow really! not sure what to say about that.

Here is a development link to the actual projecthttp://alienfactory.com/vision1/
if any one would like to help out on the javascript jquery question
above

Thanks in advance for any help

[jQuery] Re: help to simplify code

Reply via email to