0

私はbxSliderdivの上に絶対に配置されている4つのdivを持っています。これらの4つのダイビングは、20ピクセル幅に拡大してから、0ピクセル幅に縮小し、一時停止し、色を変更して、繰り返すことになっています。

各divにIDとセットの共通クラスを割り当てました。クラスに対してjQueryを実行すると、色が数回変更された後、それ以上変更できませんでした。しかし、同じコードをIDに対して実行するように変換すると、完全に実行されます。

私の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コード全体を4回、各divに1回実行する必要があります。これは多くの無駄のように思えますが、私が言ったように、IDの代わりにクラスで1回実行しようとすると、色が2〜3回変化し、その後1つの色のままになります。幅の変更は予想どおりに発生し続けます。

[編集=リクエストごとに完全なコードを追加]

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

3 に答える 3

0

どこが間違っているのか完全にはわかりません。あなたが助けを求めているのは、アニメーションをなどでは$('.slidebar')なく動作させることだと思います。$('#bar1')知らなかった場合の慣例はと.classです#id。私があなたの質問を正しく理解しているなら、あなたが望むものをいじくりまわします。幅を変更し、バーに直接関係のないものをすべて削除しました。コンテンツがないためにバーの高さがゼロであることに気付いたので、改行しないスペースを追加しました。.slidebar { height: <someheight>; }cssをどこかに追加することもできます。それでも問題が解決しない場合は、コメントで詳しく説明してください。最善を尽くします。

于 2012-06-21T22:35:27.173 に答える
0

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>
于 2012-06-21T22:35:39.773 に答える
0

私は理解できません、あなたの問題は何ですか:)

<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>
于 2012-06-21T19:27:46.587 に答える