Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery opacity help

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #25880
    GreyFox135
    Participant

    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?

    #62713
    von
    Member

    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.

    #62717
    Hugo
    Member

    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

    #62914
    GreyFox135
    Participant
    "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.

    #62915
    GreyFox135
    Participant
    "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…

    #62987
    von
    Member

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.