Question

我有四个div，绝对位于bxSlider div上。这四个潜水应该扩展到20px宽度，然后缩小到0像素宽度，暂停，改变颜色并重复。

我为每个div分配了一个id和一个公共类。当我在课堂上运行我的jQuery时，颜色改变了几次，然后再也没有改变了。但是，当我转换相同的代码以对抗ids时，它会完美地执行。

我的jQuery代码是：

    script type="text/javascript">
    jQuery(document).ready(function(){
        bar1LoopBus();
    });

    function bar1LoopBus() {
        jQuery("#bar1").css("background", "#00b2e3" );
        jQuery("#bar1").animate({ width: '20px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopDes );
    }

    function bar1LoopDes() {
        jQuery("#bar1").css("background", "#9c603e" );
        jQuery("#bar1").animate({ width: '20px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopSus );
    }

    function bar1LoopSus() {
        jQuery("#bar1").css("background", "#a0b943" );
        jQuery("#bar1").animate({ width: '20px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopInn );
    }

    function bar1LoopInn() {
        jQuery("#bar1").css("background", "#cc0001" );
        jQuery("#bar1").animate({ width: '20px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopTec );
    }

    function bar1LoopTec() {
        jQuery("#bar1").css("background", "#f6821f" );
        jQuery("#bar1").animate({ width: '20px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopBus );
    }
</script>

我的div代码是：

<div id="bars">
    <div id="bar1" class="slidebar"></div>
    <div id="bar2" class="slidebar"></div>
    <div id="bar3" class="slidebar"></div>
    <div id="bar4" class="slidebar"></div>
</div>

现在，我必须运行整个jQuery代码四次，每个div运行一次。这似乎有很多浪费，但正如我所说，如果我尝试用类而不是ids运行一次，颜色会改变两到三次，然后一直停留在一种颜色上。宽度变化继续按预期发生。

[edit =为每个请求添加完整代码]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- saved from url=(0047)http://www.pldainteriors.com/index.asp?pageid=1 -->
    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>PLDA Interiors</title>
    <script src="./PLDA Interiors_files/AC_RunActiveContent.js" type="text/javascript"></script>

    <link href="slider.css" rel="stylesheet" type="text/css">
    <link href="./PLDA Interiors_files/homestyle.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      jQuery(function(){
      jQuery('#headerslider').bxSlider({
        mode: 'fade',
        auto: true,
        autoControls: false,
        controls: false,
        speed: 4000
      });
    });
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            textLoopBus();
        });

        function textLoopBus() {
            jQuery("#ts-business").animate({ width: '120px' }, 2000 );
            jQuery("#ts-business").animate({ width: '0px' }, 2000 );
            jQuery("#ts-business").animate({ width: '0px' }, 2000 , textLoopDes );
        }

        function textLoopDes() {
            jQuery("#ts-design").animate({ width: '120px' }, 2000 );
            jQuery("#ts-design").animate({ width: '0px' }, 2000 );
            jQuery("#ts-design").animate({ width: '0px' }, 2000 , textLoopSus );
        }

        function textLoopSus() {
            jQuery("#ts-sustainability").animate({ width: '120px' }, 2000 );
            jQuery("#ts-sustainability").animate({ width: '0px' }, 2000 );
            jQuery("#ts-sustainability").animate({ width: '0px' }, 2000 , textLoopInn );
        }

        function textLoopInn() {
            jQuery("#ts-innovation").animate({ width: '120px' }, 2000 );
            jQuery("#ts-innovation").animate({ width: '0px' }, 2000 );
            jQuery("#ts-innovation").animate({ width: '0px' }, 2000 , textLoopTec );
        }

        function textLoopTec() {
            jQuery("#ts-technology").animate({ width: '120px' }, 2000 );
            jQuery("#ts-technology").animate({ width: '0px' }, 2000 );
            jQuery("#ts-technology").animate({ width: '0px' }, 2000 , textLoopBus );
        }
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            bar1LoopBus();
        });

        function bar1LoopBus() {
            jQuery("#bar1").css("background", "#00b2e3" );
            jQuery("#bar1").animate({ width: '20px' }, 2000 );
            jQuery("#bar1").animate({ width: '0px' }, 2000 );
            jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopDes );
        }

        function bar1LoopDes() {
            jQuery("#bar1").css("background", "#9c603e" );
            jQuery("#bar1").animate({ width: '20px' }, 2000 );
            jQuery("#bar1").animate({ width: '0px' }, 2000 );
            jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopSus );
        }

        function bar1LoopSus() {
            jQuery("#bar1").css("background", "#a0b943" );
            jQuery("#bar1").animate({ width: '20px' }, 2000 );
            jQuery("#bar1").animate({ width: '0px' }, 2000 );
            jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopInn );
        }

        function bar1LoopInn() {
            jQuery("#bar1").css("background", "#cc0001" );
            jQuery("#bar1").animate({ width: '20px' }, 2000 );
            jQuery("#bar1").animate({ width: '0px' }, 2000 );
            jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopTec );
        }

        function bar1LoopTec() {
            jQuery("#bar1").css("background", "#f6821f" );
            jQuery("#bar1").animate({ width: '20px' }, 2000 );
            jQuery("#bar1").animate({ width: '0px' }, 2000 );
            jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopBus );
        }
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            bar2LoopBus();
        });

        function bar2LoopBus() {
            jQuery("#bar2").css("background", "#00b2e3" );
            jQuery("#bar2").animate({ width: '20px' }, 2000 );
            jQuery("#bar2").animate({ width: '0px' }, 2000 );
            jQuery("#bar2").animate({ width: '0px' }, 2000 , bar2LoopDes );
        }

        function bar2LoopDes() {
            jQuery("#bar2").css("background", "#9c603e" );
            jQuery("#bar2").animate({ width: '20px' }, 2000 );
            jQuery("#bar2").animate({ width: '0px' }, 2000 );
            jQuery("#bar2").animate({ width: '0px' }, 2000 , bar2LoopSus );
        }

        function bar2LoopSus() {
            jQuery("#bar2").css("background", "#a0b943" );
            jQuery("#bar2").animate({ width: '20px' }, 2000 );
            jQuery("#bar2").animate({ width: '0px' }, 2000 );
            jQuery("#bar2").animate({ width: '0px' }, 2000 , bar2LoopInn );
        }

        function bar2LoopInn() {
            jQuery("#bar2").css("background", "#cc0001" );
            jQuery("#bar2").animate({ width: '20px' }, 2000 );
            jQuery("#bar2").animate({ width: '0px' }, 2000 );
            jQuery("#bar2").animate({ width: '0px' }, 2000 , bar2LoopTec );
        }

        function bar2LoopTec() {
            jQuery("#bar2").css("background", "#f6821f" );
            jQuery("#bar2").animate({ width: '20px' }, 2000 );
            jQuery("#bar2").animate({ width: '0px' }, 2000 );
            jQuery("#bar2").animate({ width: '0px' }, 2000 , bar2LoopBus );
        }
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            bar3LoopBus();
        });

        function bar3LoopBus() {
            jQuery("#bar3").css("background", "#00b2e3" );
            jQuery("#bar3").animate({ width: '20px' }, 2000 );
            jQuery("#bar3").animate({ width: '0px' }, 2000 );
            jQuery("#bar3").animate({ width: '0px' }, 2000 , bar3LoopDes );
        }

        function bar3LoopDes() {
            jQuery("#bar3").css("background", "#9c603e" );
            jQuery("#bar3").animate({ width: '20px' }, 2000 );
            jQuery("#bar3").animate({ width: '0px' }, 2000 );
            jQuery("#bar3").animate({ width: '0px' }, 2000 , bar3LoopSus );
        }

        function bar3LoopSus() {
            jQuery("#bar3").css("background", "#a0b943" );
            jQuery("#bar3").animate({ width: '20px' }, 2000 );
            jQuery("#bar3").animate({ width: '0px' }, 2000 );
            jQuery("#bar3").animate({ width: '0px' }, 2000 , bar3LoopInn );
        }

        function bar3LoopInn() {
            jQuery("#bar3").css("background", "#cc0001" );
            jQuery("#bar3").animate({ width: '20px' }, 2000 );
            jQuery("#bar3").animate({ width: '0px' }, 2000 );
            jQuery("#bar3").animate({ width: '0px' }, 2000 , bar3LoopTec );
        }

        function bar3LoopTec() {
            jQuery("#bar3").css("background", "#f6821f" );
            jQuery("#bar3").animate({ width: '20px' }, 2000 );
            jQuery("#bar3").animate({ width: '0px' }, 2000 );
            jQuery("#bar3").animate({ width: '0px' }, 2000 , bar3LoopBus );
        }
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            bar4LoopBus();
        });

        function bar4LoopBus() {
            jQuery("#bar4").css("background", "#00b2e3" );
            jQuery("#bar4").animate({ width: '20px' }, 2000 );
            jQuery("#bar4").animate({ width: '0px' }, 2000 );
            jQuery("#bar4").animate({ width: '0px' }, 2000 , bar4LoopDes );
        }

        function bar4LoopDes() {
            jQuery("#bar4").css("background", "#9c603e" );
            jQuery("#bar4").animate({ width: '20px' }, 2000 );
            jQuery("#bar4").animate({ width: '0px' }, 2000 );
            jQuery("#bar4").animate({ width: '0px' }, 2000 , bar4LoopSus );
        }

        function bar4LoopSus() {
            jQuery("#bar4").css("background", "#a0b943" );
            jQuery("#bar4").animate({ width: '20px' }, 2000 );
            jQuery("#bar4").animate({ width: '0px' }, 2000 );
            jQuery("#bar4").animate({ width: '0px' }, 2000 , bar4LoopInn );
        }

        function bar4LoopInn() {
            jQuery("#bar4").css("background", "#cc0001" );
            jQuery("#bar4").animate({ width: '20px' }, 2000 );
            jQuery("#bar4").animate({ width: '0px' }, 2000 );
            jQuery("#bar4").animate({ width: '0px' }, 2000 , bar4LoopTec );
        }

        function bar4LoopTec() {
            jQuery("#bar4").css("background", "#f6821f" );
            jQuery("#bar4").animate({ width: '20px' }, 2000 );
            jQuery("#bar4").animate({ width: '0px' }, 2000 );
            jQuery("#bar4").animate({ width: '0px' }, 2000 , bar4LoopBus );
        }
    </script>
    </head>
    <body>
    <div id="container">

        <div id="homeheader">
            <div id="homemenu">
                <ul>
                    <li><a href="./PLDA Interiors_files/PLDA Interiors.htm" title="Home" class="select">Home</a></li>
                    <li><a href="http://www.pldainteriors.com/index.asp?pageid=41" title="Projects">Projects</a></li>
                    <li><a href="http://www.pldainteriors.com/index.asp?pageid=42" title="Services">Services</a></li>
                    <li><a href="http://www.pldainteriors.com/index.asp?pageid=43" title="About">About</a></li>
                    <li><a href="http://www.pldainteriors.com/index.asp?pageid=44" title="News">News</a></li>
                    <li><a href="http://www.pldainteriors.com/index.asp?pageid=45" title="Contact">Contact</a></li>
              </ul>
            </div>
            <img src="images/plda.jpg" alt="plda interiors" id="pldalogo" />
            <div id="headerslider">
                <div id="slider-one" class="mainslide">

                </div>
                <div id="slider-two" class="mainslide">

                </div>
                <div id="slider-three" class="mainslide">

                </div>
                <div id="slider-four" class="mainslide">

                </div>
                <div id="slider-five" class="mainslide">

                </div>
            </div><!-- #headerslider -->
            <div id="bars">
                <div id="bar1" class="slidebar"></div>
                <div id="bar2" class="slidebar"></div>
                <div id="bar3" class="slidebar"></div>
                <div id="bar4" class="slidebar"></div>
            </div>
            <div style="height:1px;margin-bottom:2px;clear:both;"></div>
            <div id="change">
                <div style="float:left;margin-left:180px;margin-right:60px">
                    <img src="images/change.jpg" />
                </div>
                <div style="float:left;">
                    <div id="changeslide">
                        <div class="textslide" id="ts-business">
                            <img src="images/business.jpg" />
                        </div>
                        <div class="textslide" id="ts-design">
                            <img src="images/design.jpg" />
                        </div>
                        <div class="textslide" id="ts-sustainability">
                            <img src="images/sustainability.jpg" />
                        </div>
                        <div class="textslide" id="ts-innovation">
                            <img src="images/innovation.jpg" />
                        </div>
                        <div class="textslide" id="ts-technology">
                            <img src="images/technology.jpg" />
                        </div>
                    </div><!-- #changeslide -->
                    <img src="images/designchangeslives.jpg" style="margin-top:24px;" />
                </div>
            </div>
        </div>
        <div>
            body copy
        </div>

        <div id="footer">
            <div id="footerleft">
                <div id="copyright">Copyright © 2009, PLDA, Inc.</div>
                <div id="tagline">Interior Design/Interior Architecture</div>
            </div>
            <div id="contactdetails">
                <span>914 St. Paul Street, Baltimore, Maryland 21202 </span>
                <span><em>t</em> 410.234.8998 </span>
                <span><em>f</em> 410.234.0614 </span>
            </div>
        </div>
    </div>

</body></html>

Answer 1

我无法理解，你的问题是什么：）

<html>
<head>
<title>Offline</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<style>
.slidebar {
  width: 200px;
  height: 20px;
}
</style>
<script type="text/javascript">
    jQuery(document).ready(function(){
        bar1LoopBus();
    });

    function bar1LoopBus() {
        jQuery(".bar1").css("background", "#00b2e3" );
        jQuery(".bar1").animate({ width: '20px' }, 2000 );
        jQuery(".bar1").animate({ width: '0px' }, 2000 );
        jQuery(".bar1").animate({ width: '0px' }, 2000 , bar1LoopDes );
    }

    function bar1LoopDes() {
        jQuery("#bar1").css("background", "#9c603e" );
        jQuery("#bar1").animate({ width: '20px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopSus );
    }

    function bar1LoopSus() {
        jQuery("#bar1").css("background", "#a0b943" );
        jQuery("#bar1").animate({ width: '20px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopInn );
    }

    function bar1LoopInn() {
        jQuery("#bar1").css("background", "#cc0001" );
        jQuery("#bar1").animate({ width: '20px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopTec );
    }

    function bar1LoopTec() {
        jQuery("#bar1").css("background", "#f6821f" );
        jQuery("#bar1").animate({ width: '20px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 );
        jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopBus );
    }

</script>
</head>
<body>
<div id="bars">
    <div id="bar1" class="slidebar bar1"></div>
    <div id="bar2" class="slidebar"></div>
    <div id="bar3" class="slidebar"></div>
    <div id="bar4" class="slidebar"></div>
</div>

</body>
</html>

Answer 2

我不完全确定你哪里出错了。我认为你要求帮助的是让动画在$('.slidebar')上而不是$('#bar1')上等。如果你不知道，那么约定是.class和{{ 1}}。如果我正确理解你的问题，Here就是你想要的东西。我更改了宽度并删除了与条形图没有直接关系的所有内容。我注意到由于没有内容，条形高度为零，所以我添加了一个不间断的空间。您也可以在某处向{c}添加#id。如果这不能解决您的问题，请在评论中详细说明，我会尽力而为。

Answer 3

复制一个html文件并尝试以下代码：

<html>
<head>
<title>Offline</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<style>
.slidebar {
  width: 200px;
  height: 20px;
}
</style>
<script type="text/javascript">
    jQuery(document).ready(function(){
        bar1LoopBus();
    });

    function bar1LoopBus() {
        jQuery(".bar1").css("background", "#00b2e3" );
        jQuery(".bar1").animate({ width: '20px' }, 2000 );
        jQuery(".bar1").animate({ width: '0px' }, 2000 );
        jQuery(".bar1").animate({ width: '0px' }, 2000 , bar1LoopDes );
    }

    function bar1LoopDes() {
        jQuery(".bar1").css("background", "#9c603e" );
        jQuery(".bar1").animate({ width: '20px' }, 2000 );
        jQuery(".bar1").animate({ width: '0px' }, 2000 );
        jQuery(".bar1").animate({ width: '0px' }, 2000 , bar1LoopSus );
    }

    function bar1LoopSus() {
        jQuery(".bar1").css("background", "#a0b943" );
        jQuery(".bar1").animate({ width: '20px' }, 2000 );
        jQuery(".bar1").animate({ width: '0px' }, 2000 );
        jQuery(".bar1").animate({ width: '0px' }, 2000 , bar1LoopInn );
    }

    function bar1LoopInn() {
        jQuery(".bar1").css("background", "#cc0001" );
        jQuery(".bar1").animate({ width: '20px' }, 2000 );
        jQuery(".bar1").animate({ width: '0px' }, 2000 );
        jQuery(".bar1").animate({ width: '0px' }, 2000 , bar1LoopTec );
    }

    function bar1LoopTec() {
        jQuery(".bar1").css("background", "#f6821f" );
        jQuery(".bar1").animate({ width: '20px' }, 2000 );
        jQuery(".bar1").animate({ width: '0px' }, 2000 );
        jQuery(".bar1").animate({ width: '0px' }, 2000 , bar1LoopBus );
    }

</script>
</head>
<body>
<div id="bars">
    <div id="bar1" class="slidebar bar1"></div>
<hr />
    <div id="bar2" class="slidebar bar1"></div>
<hr />
    <div id="bar3" class="slidebar bar1"></div>
<hr />
    <div id="bar4" class="slidebar bar1"></div>
</div>

</body>
</html>

jQuery Animate适用于ID，但不适用于类

3 个答案: