Question

我想要做的就是在页面加载时或自动加载后调用此函数，我的意思是没有悬停或点击等。如果我管理我将把它放在具有延迟功能的for循环中，以便分别调用bg1，bg2 bg3和bg4

我读过这么多看似相似的问题，但不知怎的，它们对我不起作用。你能帮我解决一下吗？

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(function slide() 
{
    $('#accordion > li.bg1')(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'350px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        }
        ),
    function () {
        var $this = $(this);
        $this.stop().animate({'width':'115px'},1000);
        $('.heading',$this).stop(true,true).fadeIn();
        $('.description',$this).stop(true,true).fadeOut(500);
        $('.bgDescription',$this).stop(true,true).slideUp(700);
                }
});
</script>



<div id="content">
<ul class="accordion" id="accordion">
    <li class="bg1">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
    <li class="bg2">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
    <li class="bg3">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
    <li class="bg4">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
</ul>
</div>

Answer 1

首先，尝试使用通常的包装器$(function slide()替换行$(document).ready(function() {，并确保所有括号和大括号都正确平衡。

其次，您的选择器需要一个您没有的方法调用。目前还不清楚你想要发生什么 - 是否需要隐藏一些HTML元素，然后慢慢显示？或相反亦然？你想让它连续来回切换吗？我们可以为您提供帮助，但前提是您更具体地了解您尝试解决的问题。

<强>更新

如果要按顺序为列表项设置动画，则需要执行一些操作。首先，setTimeout在延迟后从内部调用您的函数。其次，使用$('#accordion > li').eq(i)选出i列表元素，每次调用函数时i都会递增。最后（和美学上），用slideDown / slideUps替换那些fadeIn / fadeOuts，这样整个事物就不会像动画一样猛拉和移动。

http://jsfiddle.net/mblase75/EJXRD/

function slide(i) {
    var $this = $('#accordion > li').eq(i);
//  $this.stop().animate({'width': '350px'}, 500); // not sure what this is meant to do
    $('.heading', $this).stop(true, true).slideUp(500);
    $('.bgDescription', $this).stop(true, true).slideDown(500);
    $('.description', $this).stop(true, true).slideDown(500);

    var $that = $this.siblings();
//  $that.stop().animate({'width': '115px'}, 500);
    $('.heading', $that).stop(true, true).slideDown(500);
    $('.description', $that).stop(true, true).slideUp(500);
    $('.bgDescription', $that).stop(true, true).slideUp(500);

    var items = $('#accordion > li').length;
    setTimeout(slide, 2000, (i+1) % items); // modulo
}

$(document).ready(function() {   // start the loop at the top
    slide(0);
});

Answer 2

$(function slide()语法无效，您可能正在寻找

$(function() {

作为你的第一行

Answer 3

您可以按照以下顺序：

<html>

<head>
  <script src="toLoadBefore.js"></script>
</head>

<body>

  <div class="yourHTMLHere">
    ...
  </div>

  <script>
    //the DOM is loaded you can start your JS code here
  </script>

</body>

</html>

JavaScript的;在页面加载时调用函数

3 个答案: