Skip navigation
Currently Being Moderated

fade in and out buttons

Jun 5, 2013 12:19 AM

Tags: #fade_in #fade_out #jquery_slider

Hello,

 

was wondering what is the best way to get the buttons at the bottom to fade in and out?

 

the website is http://www.ntvic.com.au

 

cheers.

 

Michael

 
Replies
  • Currently Being Moderated
    Jun 5, 2013 3:31 AM   in reply to Michael Farnbach

    Here's a white-to-black background fade on hover you could adapt to your colors

     

     

    #top-nav a strong {

        background-color: #FFFFFF;

        border: 1px solid #000000;

        border-radius: 5px 5px 5px 5px;

        color: #000000;

        font-family: Stencil,Verdana,Wide Latin,serif,verdana !important;

        font-size: 19px;

        line-height: 30px;

        margin: 2px 2px 0 0;

        padding: 2px;

        transition: background-color 0.45s ease-in-out 0s;

    }

    #top-nav a:hover strong {
        background-color: #000000;

        color: #FFFFFF;

        transition: background-color 1s ease-in-out 0s;

    }

     

    You can see it in action here:

    http://projects.snowshtechnologies.com/golden_dragon/home/

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2013 10:02 AM   in reply to Michael Farnbach

    Ken gave you one way with CSS level 3 transitions for the browsers that support it. You would need to add the vendor prefixes to support mozilla, webkit, opera and MS IE.  It goes without saying that, CSS level 3 transitions won't work in older IE browsers.

     

    Another option is to use jQuery animate.  Fortunately, jQuery works in all browsers.

    http://jsfiddle.net/NancyO/JWsaC/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 9:14 AM   in reply to Michael Farnbach

    For my solution, you simply need to copy & paste the HTML, CSS and JavaScript function code I shared with you on JS Fiddle into your own document.  Also, add a link to the latest jQuery core library to your <head> tags.

     

    <!--jQuery latest core library-->

    <script src="http://code.jquery.com/jquery-latest.min.js"> </script>

     

     

    For Ken's solution, the vendor prefixes are added to your CSS transition.

     

    -webkit-transition: background-color 0.45s ease-in-out 0s;

    -moz-transition: background-color 0.45s ease-in-out 0s;

    -ms-transition: background-color 0.45s ease-in-out 0s;

    -o-transition: background-color 0.45s ease-in-out 0s;

    transition: background-color 0.45s ease-in-out 0s;

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 3:51 AM   in reply to Michael Farnbach

    Michael, you should fix goofy brackets etc.

     

    <div id="navigationalbar">

        <ul>

          <li><a href="index-new.html">home</a></li>

          <li><a href="about.html"</a>about us<a</li>

          <li><a href="services.html">services</a></li>

          <li><a href="folio.html">some of our work</a></li>

          <li><a href="facebook.html">facebook</a></li>

        </ul>

      </div>

     

    Your Google fonts links are placed between head & body sections

     

    There are probably some more, so run your page through the validator here:

    http://validator.w3.org/

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 8:59 AM   in reply to Michael Farnbach

    Delete line 21.  It's a duplication of jQuery core library script on line 5 so you don't need it.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 11:47 PM   in reply to Michael Farnbach

    Hi Michael,

     

    You should place the link to the fonts within the HEAD element of your document.

     

    Have a look here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.ntvic.com .au%2F.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 6:41 PM   in reply to Ben Pleysier

    Hi Michael,

     

    Change to the highlighted values

    #wrapper #navigationalbar ul li a {

        color: #FFF;

        background-color:transparent;

        text-decoration: none;

        display: block;

        text-align:right;

        font-family: Titillium Web, sans-serif;

        font-weight: 600;

        font-size: 16px;

        padding: 5px;

        -webkit-transition: background-color 0.45s ease-in-out 0s;

    -moz-transition: background-color 0.45s ease-in-out 0s;

    -ms-transition: background-color 0.45s ease-in-out 0s;

    -o-transition: background-color 0.45s ease-in-out 0s;

        transition: background-color 0.45s ease-in-out 0s;

    }

    #wrapper #navigationalbar ul li a:hover {

        background-color: transparent;

        color: #D7C427;

        transition: background-color 1s ease-in-out 0s;

     

    }

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points