Grow your CSS skills. Land your dream job.

Jquery Animate, Opacity and Tooltip

  • # August 10, 2009 at 4:12 pm

    Hi Guys,

    Been trying to create an effect i have for my Navigation icons using Jquery.

    I have added an attachment for a better idea of what i want to achieve.

    I want an icon to be displayed 70% opacity on page load.
    When i hover over the icon i want it to fadeTo to 100% while moving up about 25px and displaying a tooltip.

    This is what i have so far

    Code:
    $(“li a”).fadeTo(“slow”, 0.6); //THIS NEEDS TO BE CHANGED SO ITS INSTANT ON PAGE LOAD

    $(“li a”).hover(function(){
    $(“li a”).fadeTo(“slow”, 1.0); // This sets the opacity to 100% on hover
    },function(){
    $(“li a”).fadeTo(“slow”, 0.6); // This sets the opacity back to 60% on mouseout
    });

    I hope this is clear enough for you to reply.

    Thanks

    Steven

    # August 10, 2009 at 4:46 pm

    Ok i have been working out some answers and i think adding some inline styles through Jquery will fix some issues.

    Code:
    $(“li a”).css(“opacity”,0.2).css(“visibility”, “visible”).css(“margin-top”, “10px”);
    $(“li a”).mouseover(function(){
    $(“li a”).css(“opacity”, 1).css(“margin-top”, 0).css(“visibility”, “visible”);
    });

    This will set opacity on load. Then on hover the image will change opacity and move up 10px.

    How do i get the original state when i hover away?
    How do i make the transitions smooth

    EVEN BETTER STILL
    i will use AddClass instead of multiple .css

    # August 10, 2009 at 4:55 pm

    Ok i have added an .addClass function when mouseover but how do i get back to the original state when i move my cursor away from the effected area.

    Code:
    $(“li a”).addClass(“nav-start”);
    $(“li a”).mouseover(function(){
    $(“li a”).addClass(“nav-hover”);
    });

    EDIT SO FAR

    Code:
    $(“li a”).addClass(“nav-start”);
    $(“li a”).mouseover(function(){
    $(“li a”).removeClass(“nav-start”);
    $(“li a”).addClass(“nav-hover”);

    $(“li a”).mouseout(function(){
    $(“li a”).removeClass(“nav-hover”);
    $(“li a”).addClass(“nav-start”);
    });
    });

    I have most of the effect sorted out i just need a more smoother transition now and a tooltip to appear.

    All ideas and suggestions to my my code so far better- welcome.

    Thanks

    # August 14, 2009 at 2:37 am

    sorry no one has ehlped you, normally soeone would have helped, glad your getting it on your own & sharing…… I would help, but I know nothing of jQuery

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".