SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery animated navigation

    Hi, I'm working through the Jquery Ninja book and all is going well right up to chapter 03/09-animated navigation. I'm supposed to animate the background of an <li> on mouse over/mouse out. I can get the animated blob to work, however, it appears after the <ul>, not behind the <li>. See the code attached and also a screen shot of where the blob appears on page load - I've styled the blob red so you can see it easily.
    Where am I going wrong?

    //create wobbly blob
    $('<div id="topnav_blob"></div>').css({
    width: $('#topnav li:first a').width() + 10,
    height: $('#topnav li:first a').height() + 10
    }).appendTo('#topnav');

    //trigger blob
    $('#topnav a').hover(function(){

    //mouse over event
    $('#topnav_blob').animate(
    { width: $(this).width() + 10, left: $(this).position().left },
    { duration: 'slow', easing: 'elasticEaseIn', queue: false }
    );

    }, function() {

    //mouse out event
    $('#topnav_blob')
    .stop(true)
    .animate(
    { width: 'hide' },
    { duration: 'slow', easing: 'circEaseOut', queue: false }
    )
    .animate(
    { left: $('#topnav li:first a').position().left });

    });
    Attached Images Attached Images

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I notice you have width: 'hide'. 'hide' doesn't sound like a valid value; should it be zero?
    From the English nation to a US location.

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI, changed value to zero but result is the same

  4. #4
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    Shropshire
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In case you didn't find a solution to this problem I thought I would post here (and it may be useful to others) that after having the same problem I found a thread about something similar and tried putting the jquery library file in the same folder as my other script files - it resolved the problem (I was initially using the external Google link).


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
  •