Question

The Problem

I’ve got a side navigation that I’ve put together and so far it’s working ok. I’m trying to fade in a little ‘close’ button on the panel that gets toggled so a user can easily close the toggled panel if they are done with it.

I have something in place that’s sort of doing it, but if you click from one side nav item to another, you’ll see that it gets messy and out of sync.

jsFiddle

http://jsfiddle.net/visualdecree/4A23Z/37/

jQuery

$(".sn a").on('click',function(){ // Sidenav panel script

    var panID = $("#" + $(this).data('panel') );

    $("div[id*='sn-pan-']")
    .stop()
    .hide({slide:'toggle'}, 400);

    $(panID)
    .css({'left' : '139px','overflow':'visible'})
    .stop()
    .animate({width:'toggle'}, 400)

        $(".control-view").stop().fadeOut("slow");  // Fadein menu close button
    $(".control-view").not(":visible").stop().delay(400).fadeTo("fast", 0.33);   

});

$('.sn').click(function(e) {
    $('ul.sidenav li').not(this).removeClass('active'); // Active class removal / add
    $(this).stop(true, true).toggleClass("active");    
});

$(".control-view").hover( // Hover effect for menu close button
    function () {
    $(".control-view").stop().hide().fadeTo("fast", 1); // Hover in
   }, 
    function () {
    $(".control-view").fadeTo("normal",0.33); // Fade back to previous set opacity
});

$('.control-view').click(function(e) {
        $("div[id*='sn-pan-']")
        .stop()
        .hide({slide:'toggle'}, 400);

        $('ul.sidenav li').not(this).removeClass('active');

        $(".control-view").stop().fadeOut("fast");
});

I appreciate my code might be messy, I’m learning so anything you can help with i will appreciate and take away with me.

Answer 1

Try changing the line

$(".control-view").stop().fadeOut("slow");  // Fadein menu close button

To

$(".control-view").hide();  // Fadein menu close button

Basically the selector

$(".control-view").stop().fadeOut("slow"); 

is fading out all the anchors (<a class=”control-view”></a>) and then you are immediately trying to find the visible ones with $(“.control-view”).not(“:visible”)…. but no anchors are actually hidden yet.