Javascript jqueryeffect delay搞乱了页面上的其他脚本_Javascript_Jquery_Slider

Javascript jqueryeffect delay搞乱了页面上的其他脚本

javascript jquery

Javascript jqueryeffect delay搞乱了页面上的其他脚本,javascript,jquery,slider,Javascript,Jquery,Slider,我正在尝试使一个包含div在页面加载时淡入，经过一段延迟加载页面时，滑块布局会中断 jQuery(document).ready(function() { $('.main-content').css('display','none'); $('.main-content').delay(1000).fadeIn(3000); }); 链接：奇怪的是，当我放下delay时，它工作得很好 jQuery(document).ready(function() { $('.main-con

我正在尝试使一个包含div在页面加载时淡入，经过一段延迟

加载页面时，滑块布局会中断

jQuery(document).ready(function() {

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

});

链接：

奇怪的是，当我放下delay时，它工作得很好

jQuery(document).ready(function() {

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

});

注意：jquery滑块肯定没有问题，因为我在页面上有其他脚本，当我添加.delay时也会出错。（为了简单起见，我从这里删除了它们）

非常感谢

这里是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>

也许没有什么可以延迟的，因为没有动画开始。您可以这样做：

jQuery(document).ready(function() {

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

希望这有帮助。干杯，来自玻利维亚拉巴斯

谢谢大家，我使用了这种技术，将滑块函数像这样放在setTimeout中，它工作了

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


$（'.main content'）.css（'display'，'none'）；
setTimeout（函数（）{
$（'main content'）.fadeIn（1000）；
$（'.slider'）.bjqs({
animtype:“褪色”，
身高：641，
宽度：1190，
回答：是的，
开始：是的，
showcontrols：对，
centercontrols:false，
下一步：“下一步”，
prevtext:“Prev”，
showmarks:false，
中心标记：正确
});
}, 1000);

延迟

在已经有动画队列的情况下有效；没有。请尝试

setTimeout

@elclanrs delay here将延迟队列中的下一项，因此fadeIn（）effect@A.Wolff：你是对的，

hide

和

show

不能按预期工作（除非你将ms传递给方法）已经检查了问题几次，看不出有什么问题，我以为是队列问题，但事实并非如此。您是否可以进一步追踪这个问题，并发布一个简化的JSFIDLE示例？但延迟用于队列中的下一项，而不是前一项。我删掉了“Cheers bla bla bla”，因为它并不能真正为答案增加价值。出于同样的原因，我们在问题中也删去了“谢谢你的代码”。是的，我知道，我读了SO的建议。。但这是我的商标：）谢谢，我使用了这种技术，并将滑块函数放入setTimeout中，如下所示；

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