this looks a bit like a homework assignment to be honest ;)
for ease of maintenance and to avoid repeating code i'd stick the two
anonymous functions into a single own 'proper' function and pass the
variables to it.
you're also getting the target elements on every single mouseover and
mouseout event, do you need to do that?
generally speaking, you should avoid classnames that describe the
style they are assigned contain - 'floatleft' might end up being set
to float:right at a later date and the it all just gets confusing.
i've worked on enough sites with classes like 'blue-text' instead of
something more enlightening like 'hilight' tol have developed a
healthy loathing for that particular foible!
your HTML is hard to read too.
<div id="services" class="floatleft"><h1>title</h1><p>some text </p><a
href="#"><img src="images/learnmore-light.gif" alt="" /></a></div>
is much easier to read presented like
<div id="services" class="floatleft">
<h1>title</h1>
<p>some text </p>
<a href="#">
<img src="images/learnmore-light.gif" alt="" />
</a>
</div>
although exactly how you choose to indent your code is up to you
really. HTML generated off a backend database often looks like shit if
you viewsource but sometimes it's not worth formatting it all nicely.
oh, and presumably you'll fill out your alt attribute.
On Sep 19, 8:16 pm, alienfactory <alienfacto...@gmail.com> wrote:
> i would like to know how i could do it better this actualy repeats 3
> more time to get the other mouse over states.
> Please dont write any code i am still learning and would be helpful if
> anyone could just guide me in the right direction
>
> Many Thanks
>
> $('#vision, #navvision').hover(
> function () {
> $('#services, #approach,
> #team').stop().fadeTo('slow', .2);
> $('#navigation').stop().animate({ backgroundColor:
> "#9e97ca" },
> 500);
> },
> function () {
> $('#services, #approach,
> #team').stop().fadeTo('slow', 1);
> $('#navigation').stop().animate({ backgroundColor:
> "#404040" },
> 500);
> }
> );
>
> html code
> <div id="navigation" class="home">nav ul list</div>
> <div id="services" class="floatleft"><h1>title</h1><p>some text </p><a
> href="#"><img src="images/learnmore-light.gif" alt="" /></a></div>
> <div id="vision" class="floatleft"><h1>title</h1><p>some text</p><a
> href="#"><img src="images/learnmore-light.gif" alt="" /></a></div>
> <div id="approach" class="floatleft"><h1>title</h1><p>some text</p><a
> href="#"><img src="images/learnmore-light.gif" alt="" /></a></div>
> <div id="team" class="floatleft"><h1>Team</h1><p>some text</p><a
> href="#"><img src="images/learnmore-light.gif" alt="" /></a></div>
