Question

I’ve created your typical jQuery slider (code from here). Everything works just fine as is, except I don’t want the fadeIn() to run when the page loads (it just looks weird since the user hasn’t clicked anything yet). Any ideas how to fix this? Basically I want to leave it as is, except no fade on page load. Thanks!

// Tab slides
$(function () {
    var tabContainers = $('div.slider > div');

    $('div.slider ul.slider-nav a').click(function () {
        tabContainers.hide().filter(this.hash).fadeIn();

        $('div.slider ul.slider-nav a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

Answer 1

// Tab slides
$(function () {
    var tabContainers = $('div.slider > div'),
        loaded = false;

    $('div.slider ul.slider-nav a').click(function () {
        var tab = tabContainers.hide().filter(this.hash);
        if (loaded){
          tab.fadeIn();
        }else{
          tab.show();
        }
        loaded = true;

        $('div.slider ul.slider-nav a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

Explanation: The script is loading a click handler, then (once loaded) calling the click handler it just created. Because of this, it will fade (as the handler is instructing it to do). This can be avoided by added a check (in this cases the loaded variable) that basically lets the first click flow through without any intervention, but makes any future calls apply the fade.