Grow your CSS skills. Land your dream job.

jQuery opacity help

  • # August 25, 2009 at 3:37 pm

    Hi everyone, I’m having a great time learning jQuery. I love it!

    Now to the issue: I’m working on my blogs redesign. If you go here http://redeyedesigner.com/dev/red/ you’ll notice my navigation has a description below each link. As soon as the page loads the text fades out. Then when you hover over the link it fades back in and out as soon as you mouse out.

    What I’d like to do is have the sub text not show up until I hover over the corresponding link. As of now, the sub text loads up then fades away. I tried adding an opacity rule of zero and it worked on every browser except IE 7 (of course). Is there a way I can get this to work in IE 7?

    Here’s my code for the animate action:

    Code:
    $(document).ready(function(){
    $(‘#nav span’).animate({ “opacity” : 0 });

    $(‘#services’).hover(function() {
    $(‘#nav span.sub1′).stop().animate({ “opacity” : 1 });
    },function() {
    $(‘#nav span.sub1′).stop().animate({ “opacity” : 0 });
    });

    $(‘#portfolio’).hover(function() {
    $(‘#nav span.sub2′).stop().animate({ “opacity” : 1 });
    },function() {
    $(‘#nav span.sub2′).stop().animate({ “opacity” : 0 });
    });

    $(‘#nav-about’).hover(function() {
    $(‘#nav span.sub3′).stop().animate({ “opacity” : 1 });
    },function() {
    $(‘#nav span.sub3′).stop().animate({ “opacity” : 0 });
    });

    $(‘#contact’).hover(function() {
    $(‘#nav span.sub4′).stop().animate({ “opacity” : 1 });
    },function() {
    $(‘#nav span.sub4′).stop().animate({ “opacity” : 0 });
    });
    });

    Can anyone help?

    von
    # August 25, 2009 at 8:18 pm

    I believe if you specify timing it might fix things. Add ", 0" after you animate selector.

    Code:
    $(document).ready(function(){
    $(‘#nav span’).animate({ “opacity” : 0 }, 0);

    It tells the animate to occur immediately instead of whatever the default timing is. It seemed to fix my little test I built to reproduce the behavior, but I didn’t have any other scripts on the page, so it might still be something else on your page that is hosing things up.

    # August 26, 2009 at 4:38 am

    Why not give the descriptions a CSS class that makes them invisible immediately? As far as I know CSS comes before Javascript.. So try using visibility: hidden

    # August 27, 2009 at 8:15 pm
    "von" wrote:
    I believe if you specify timing it might fix things. Add ", 0" after you animate selector.

    Code:
    $(document).ready(function(){
    $(‘#nav span’).animate({ “opacity” : 0 }, 0);

    It tells the animate to occur immediately instead of whatever the default timing is. It seemed to fix my little test I built to reproduce the behavior, but I didn’t have any other scripts on the page, so it might still be something else on your page that is hosing things up.

    Now instead if it fading away it just turns off like a light bulb. I wish it just never displays when the pages loads.

    # August 27, 2009 at 8:16 pm
    "Hugo" wrote:
    Why not give the descriptions a CSS class that makes them invisible immediately? As far as I know CSS comes before Javascript.. So try using visibility: hidden

    seemed like a good idea, but visibility didn’t work. jQuery couldn’t animate it…weird…

    von
    # August 28, 2009 at 9:05 pm

    It sounds like something else is running before your opacity event when the page loads. If you have various $(document).ready(function(){… calls in multiple scripts could one of them could slow down the execution of another?

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

You must be logged in to reply to this topic.

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