CODEWITHSUNDEEP
jquerycss
VZM
VZM

Reputation: 35

JQuery: simple menu animate and content show/hide

Mostly Working Fiddle --> http://jsfiddle.net/7nrZ6/40/

    $('#inav .opt').mouseover(function(){
    $(this).animate({opacity:1});
});
$('.opt').mouseout(function(){
    if($(this).hasClass('selected'))
    {
        $(this).animate({opacity:1});
    }
    else
    {
        $(this).animate({opacity:.25});
    }
});
$('.opt').click(function(){
    if(!$(this).hasClass('selected'))
    {                
        $('.selected').animate({opacity:.25});
        $('.opt').removeClass('selected');
        $(this).addClass('selected'); 
        $(this).animate({opacity:1});
    }
});

$("#buttons img").click(function () {
    var id = $(this).attr("id");
    $("#pages div").css("display", "none");
    $("#page-" + id).css("display", "block");
});

My fiddle is mostly working. I have 2 questions to finish it off.

The mouseover/out animation seems to stack, so if I wave my mouse over it a bunch of times, it will play the animation according to how many times it registered the over/out. Kind of annoying. I was using hover before with a stop function, but couldn't figure out how to do the click portion with it. How can I set it to not stack over/out registrations?

I want my content divs to all be hidden at first, then appear/disappear according to button clicked. As it is now, they are all visible. When I set the #pages id to display none, none of the pages unhide when button is clicked. Not sure if JS is even needed for this kind of functionality. If there is an easier way, please advise.

I'm sure these are simple fixes. I'm learning as I go. Any help appreciated!

Upvotes: 1

Views: 475

Answers (1)

PSL
PSL

Reputation: 123739

Like this?

Demo

You can use this css rule to hide them:

#pages > div[id^="page"]
{
    display:none;
}

And you can use mouseenter/mouseleave (This is actual hover) instead of mouseover/mouseout and use .stop() to cleanup any previous animation from running on frequent hovers and simplify it to:

$('#inav .opt').mouseenter(function(){
    $(this).stop().animate({opacity:1});
}).mouseleave(function(){
    $(this).stop().animate({opacity: $(this).is('.selected') ? 1 : .25});
});

$('.opt').click(function(){
    var $this = $(this);
    if(!$this.is('.selected'))
    {                
        $('.selected').stop().animate({opacity:.25}); 
        $('.opt').removeClass('selected');
        $this.addClass('selected').stop().animate({opacity:1}); 
    }
});

$("#buttons img").click(function () {
    $("#page-" + this.id).show().siblings('div[id^="page"]').hide();
});

Upvotes: 3

Related Questions