Fatal编程技术网
  • jquery-animate/
  • Jquery animate jqueryanimate可以在id上工作，但不能在类上工作

Jquery animate jqueryanimate可以在id上工作，但不能在类上工作

Jquery animate jqueryanimate可以在id上工作，但不能在类上工作,jquery-animate,Jquery Animate,我有四个div绝对位于bxSlider div之上。这四个div应该扩展到20px宽度，然后收缩到0px宽度，暂停，更改颜色并重复 我为每个div分配了一个id和一个集合的公共类。当我对类运行jQuery时，颜色改变了几次，然后再也没有改变。但是，当我将相同的代码转换为针对ids运行时，它的执行非常完美 我的jQuery代码是： script type="text/javascript"> jQuery(document).ready(function(){

我有四个div绝对位于bxSlider div之上。这四个div应该扩展到20px宽度，然后收缩到0px宽度，暂停，更改颜色并重复

我为每个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>
我的divs代码是：

<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运行一次。这似乎是一种浪费，但正如我所说的，如果我尝试用类而不是ID运行一次，颜色会改变两三次，然后停留在一种颜色上。宽度更改将继续按预期进行

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

    <!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>
我不明白，你有什么问题：

<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>
我不完全确定你错在哪里。我想你需要帮助的是让动画在$'.slidebar'而不是$'bar1'上工作。如果你不知道的话，惯例是.class和id。如果我正确理解了你的问题，它就是你想要的东西。我改变了宽度，移除了所有与钢筋没有直接关系的东西。我注意到，由于没有内容，这些条的高度为零，所以我添加了一个非中断空间。您还可以将.slidebar{height:；}添加到css的某个位置。如果这不能解决您的问题，请在评论中详细说明，我将尽最大努力。

复制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>
显示用于选择和操作类的代码。也许你只是遇到了一个简单的语法错误。我在文章的底部添加了我的完整页面代码，Jonathan。我的问题是，如果我在代码中使用元素的id，那么颜色的改变会非常有效。但是，如果我使用一个类，以便同一代码可以影响多个元素，则颜色更改会发生一次或两次，然后停止。此时，我可以告诉您，我的代码中肯定存在用于类操作的语法错误。不幸的是，我在添加id操作时过度编写了该代码。我可能会在这个周末回去试着把它换回来。