0

I'm making a navigation system on some of the pages of my website that is roughly like this: 

<a href="link"><span>Page</span></a>

Where each navigation link would look like that. I want the link representing current page to have the following properties: 

background-color: buttonface; border: 2px solid grey; border-radius: 5px;

and all navigation links to have these properties: 

padding: 0 6px 0 6px;

In addition I wanted to make the border and background of the current page's link fade into any link on .mouseenter() and fade out on .mouseleave() unless it is the current page in which case it should not fade out. I am relatively new to jQuery and I have no idea how to do this.

It isn't completely necessary for the links to be in the format I put above as long as they're listed horizontally across the page and have the properties I specified. If it matters my site also uses the following code for style already: 

body{font-family: 'Raleway'; background: #F07400; color: black;   font-size: 18px; margin: 20px 0 20px 20px;}
button{font-size: 18px; font-family: 'Raleway'; border-radius: 5px; border: 2px solid grey;}

and 

$(document).ready(function() {
    widthval = $(window).width()-40;
    $("body").css("width", widthval);
    $("body").fadeOut(0);
    $("body").fadeIn(1600);
    $(window).resize(function(){
        widthval = $(window).width()-40;
        $("body").css("width", widthval);
    });
});
DontVoteMeDown
  • 21,122
  • 10
  • 69
  • 105
zzomtceo
  • 47
  • 7
  • 1
    This would be a perfect case to use a fiddle. – em_ Nov 27 '13 at 20:15
  • You can use the multiple layers solution suggested by Wayne, but if you are comfortable restricting the effect to CSS3-enabled browsers, I would recommend defining your border and background colors in `rgba`. This will allow you to animate over the alpha member to lower the opacity of background and border without affecting the contents. See http://stackoverflow.com/questions/3242368/jquery-rgba-color-animations – cmw Nov 28 '13 at 00:30

1 Answers1

0

You could layer two body layers, by placing a body2 positioned absolute as a child element of body, which would draw it ontop of body. Have the body 2 contain the border information and body contain the content. Then fade body2.

But this solution would require the content to exist in both body and body2 because clicks would be blocked to body and processed through body2.

updated

<div style="width:needed; height:needed;">
     <div2 style="position:absolute; width:sameAsBody; height:sameasbody" class="fade">
          this content will fade.
     </div2>
content content here will be faded to. If changing just the background it would be literially the same hence it appears that the content did not fade. 
</div>

$(document).ready(function(){

$(‘.fade’).fadeTo(2000, 1.0).fadeTo(4000, 0.0);

});
Wayne
  • 4,760
  • 1
  • 24
  • 24