Reputation: 428

Jquery effect delay screws up other scripts on the page

I'm trying to make a containing div fade in on page load, after a delay.

When the page loads, the slider layout breaks.

jQuery(document).ready(function() {

$('.main-content').css('display','none');
$('.main-content').delay(1000).fadeIn(3000);

});

Link: http://br-webdesigner.com/blah/ash-ver3/

The strange thing is, when I drop delay, it works fine!

jQuery(document).ready(function() {

$('.main-content').css('display','none');
$('.main-content').fadeIn(3000);

});

enter image description here

Note: Pretty sure is not an issue with the jquery slider, as I had other scripts on the page, which also screwed up when I added .delay. (I've dropped them from this for simplicity)

Thanks very much,

Here is the HTML;

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>

    <meta charset="utf-8">
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Ashley Portfolio site</title>
    <meta name="description" content="Ballbag's Personal Website">
    <meta name="keywords" content="Personal, portfolio, Graphic, designer">

    <meta name="author" content="br-webdesigner.com">

    <meta http-equiv="cleartype" content="on">

    <link rel="shortcut icon" href="/favicon.ico">

    <!--jquery -->
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/styles.css" media="all">
    <link rel="stylesheet" href="css/bjqs.css">

    <!-- JS -->
    <script src="scripts/modernizr-2.5.3-min.js"></script>
    <script src="scripts/bjqs-1.3.min.js"></script>


</head>

<body class="homepage">

    <div class="container container-main">
        <div class="main-content">
            <div class="slider-holder">
            <section class="slider">
             <!-- start Basic Jquery Slider -->
                <ul class="bjqs">
                    <li>
                        <div class="caption">
                            <div class="caption-head"><span>Branding &amp; Website</span></div>
                            <div class="caption-title"><span>Mconie Company</span></div>
                        </div>
                        <a href="#"><img src="images/slider-1.jpg" /></a>
                    </li>
                    <li>
                        <div class="caption">
                            <div class="caption-head"><span>Digital Brochure</span></div>
                            <div class="caption-title"><span>Assael</span></div>
                        </div>
                        <a href="#"><img src="images/slider-2.jpg" /></a>
                    </li>
                </ul>
        <!-- end Basic jQuery Slider -->
            </section>
        </div>

        <div>
            content here
        </div>

            <div class="clear"></div>
        </div><!--end of main content -->

    </div><!--end of container-->

    <script>

    $('.main-content').css('display','none');
    $('.main-content').delay(500).fadeIn(1000);

    </script>


        <script class="secret-source">
          jQuery(document).ready(function($) {

            $('.slider').bjqs({
              animtype      : 'fade',
              height        : 641,
              width         : 1190,
              responsive    : true,
              randomstart   : true,
              showcontrols : true,
              centercontrols : false,
              nexttext : 'Next',
              prevtext : 'Prev',
              showmarkers : false,
              centermarkers : true
            });     


            });

            </script>

</body>
</html>

CSS;

section.slider{
    margin-bottom:100px;
    padding:5px;

    .caption{
        color:white;
        position:absolute;
        top:60%;
        width:100%;
        text-align:center;
        .caption-head{
            height:5.5em;

            span{
                border-bottom:1px solid white;
                padding-bottom:1.8em;
                letter-spacing:.3em;
                font-size:.9em;
            }
        }
        .caption-title span{
            font-weight:700;
            font-size:3.3em;
            text-transform:uppercase;
            letter-spacing:.2em;
        }
    }
}

.bjqs-controls{
    background:white;
    position:relative;
    height:28px;
    li{
        display:block;
        position:absolute;
    }
}

bjqs-markers{
    display:none;
}



li.bjqs-prev{
    left:8px;
    top:10px;
    a{
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display:block;
        height:8px;
        width:5px;
        background:url(../images/slider-arrows-bk.png) no-repeat;
        background-position:0 0;
    }
}

li.bjqs-next{
    right:8px;
    top:10px;
    a{
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display:block;
        height:8px;
        width:5px;
        background:url(../images/slider-arrows-bk.png) no-repeat;
        background-position:-5px 0px;
    }
}

.bjqs-markers{

    a{
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display:block;
        height:18px;
        width:20px;
        background-position:10px 0;
    }
    li.active-marker a{
    }

}

Upvotes: 0

Answers (2)

bazzlebrush

Reputation: 428

Thanks all, I used this technique and put the slider function inside setTimeout like this and it works;

<script>

    $('.main-content').css('display','none');
      setTimeout(function(){

          $('.main-content').fadeIn(1000);

          $('.slider').bjqs({
            animtype      : 'fade',
            height        : 641,
            width         : 1190,
            responsive    : true,
            randomstart   : true,
          showcontrols : true,
          centercontrols : false,
          nexttext : 'Next',
          prevtext : 'Prev',
          showmarkers : false,
          centermarkers : true
          });

      }, 1000);

    </script>

Upvotes: 0

Edgar Villegas Alvarado

Reputation: 18354

Maybe there's nothing to delay because no animation has started. You could do this:

jQuery(document).ready(function() {

  $('.main-content').css('display','none');
  setTimeout(function(){                 //Pure JS delay
      $('.main-content').fadeIn(3000);
  }, 1000);
});

Hope this helps. Cheers, from La Paz, Bolivia

Upvotes: 1

Jquery effect delay screws up other scripts on the page

Answers (2)

Related Questions