Question

I’ve only started coding a month or two ago and I’ve run into a problem that I can’t seem to find a solution to.

I have a slideshow that opens up when a button is clicked, the problem that I have is that one the of the controls for the slideshow itself (‘right-control’) is visible when page loads.

I need it to fade in along with ‘slide’ when the slideshow opens up, then hide when you close the slideshow.

Any help would be appreciated.

Here’s the code for the slideshow:

//Slideshow

$("#slideshow").css("overflow", "hidden");

manageControls(currentPosition);

$('.control').click(function () {

    currentPosition = ($(this).attr('id') == 'right-control') ? currentPosition + 1 : currentPosition - 1;

    manageControls(currentPosition);

    $('#slides').animate({
        'left': slideWidth * (-currentPosition)
    }, 600);
});

function manageControls(position) {

    if (position === 0) {
        $('#left-control').hide();
    } else {
        $('#left-control').show();
    }

    if (position == slidesNumber - 1) {
        $('#right-control').hide();
    } else {
        $('#right-control').show();
    }
}
//End Slideshow

Here’s my jsFiddle with full code:

http://jsfiddle.net/tVsjY/2/

Answer 1

Found a workaround for what I need to do.

Since manageControls function hides/show left/right controls depending on current position of #slides, all that needs to be done to hide .control on load is to also hide #slides.

So if I put the following on line 9:

$("#center, #slideshow, .slide").hide();

Then .show it on click – it works!

LATEST UPDATE:

Added the following lines to make it aesthetically applealing to the eye (control now fades into view):

    $(".control").stop(true).delay(1800).animate({opacity: "0.5"}, 2000);

    $(".control").stop(true).animate({opacity: "0"}, 400);

Here’s my updated jsFiddle:

http://jsfiddle.net/tVsjY/18/

P.s. It’s not pretty yet, those two controls need to be fading in and out when the slideshow’s activated. Will work on that next then post an update.