SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems using jquery transit properly

    I'm having a hard time trying to understand or code jquery properly using jquery transit. The objective is to make the links move up if the mouse enters or hovers on the link. Here is what i have done so far

    http://clestportfolio.zz.mu/Transit/

    SCRIPT:

    Code:
    <script>
    $(document).ready(function(){
        
        $(".nav").mouseenter(function() {
            $('.nav').transition({ y: '-40px' });
              
        });
        
        $(".nav").mouseleave(function() {
            $('.nav').transition({ y: '0px' });
              
        });
        
    }); //END
    </script>
    STYLE:

    Code:
    .box1{width:200px; height:100px; background-color:red; margin-top:50px; display:block;}
    .nav {line-height:100px; text-align:center; }
    .nav li{display:inline}
    .nav a{text-decoration:none; color:black; background-color:green}
    .nav a:hover{color:white; font-size:20px}
    MARKUP:
    Code:
    <div class="grid_4">
             <div class="box1">
                 <ul class="nav">
                     <li><a href="#" title="Home">Home</a></li>
                     <li><a href="#" title="About">About</a></li>
                 </ul>
             </div>
    </div>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,341
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    You really don't need to use an additional library for this.
    Here's an example doing what you want, just using .animate()

    The trick here (which also applies if you are using Transit), is to attach the eventHandler to the <li> element and set its display property to inline-block.

    HTML Code:
    <!doctype html>
    <html>
      <head>
        <base href="http://clestportfolio.zz.mu/Transit/" />
        <title>Transit Test</title>
        <link rel="stylesheet" href="css/960_12_col.css" />
        <link rel="stylesheet" href="style.css" />
        <style>
          #home{background:blue; display:inline-block;}
          #home a{position: relative;}
        </style>
      </head>
      <body>
        <div class="container_12">
          <div class="grid_4">
            <div class="box1">
              <ul class="nav">
                <li id="home"><a href="#" title="Home">Home</a></li>
                <li id="about"><a href="#" title="About">About</a></li>
              </ul>
            </div>
          </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
          $("#home").hover(function(e) {
            if(e.type === "mouseenter"){
              $("#home > a").animate({ 'top': -50});
            } else {
              $("#home > a").animate({ 'top': 0});
            }
          });
        </script>
      </body>
    </html>
    Here's a demo. I've set the background colour of the <li> element, so that you can see what's going on.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •