CODEWITHSUNDEEP
javascriptjquerysliderfade
ansarob
ansarob

Reputation: 825

jQuery no Fade on Page Load

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();
});

Upvotes: 1

Views: 247

Answers (3)

Brad Christie
Brad Christie

Reputation: 101604

// 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.

Upvotes: 1

Nicolas78
Nicolas78

Reputation: 5144

Well can't you just remove

tabContainers.hide().filter(this.hash).fadeIn();

?

Upvotes: 0

T. Stone
T. Stone

Reputation: 19495

You could set a flag after the first run, which is then checked on successive runs.

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

    $('div.slider ul.slider-nav a').click(function () {
        tabContainers.hide().filter(this.hash);
        if(!firstRun) { tabContainers.fadeIn(); firstRun = false; }

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

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

Upvotes: 0

Related Questions