1

リストの右側に画像がある異なるコンテナを切り替えるために、片側に順序付けられていないリストがあるページがあります。

問題のページは次の URL にあり、head タグに JQuery コードが含まれています。

http://dev.bathroomwarehouse.com/bathrooms.html

JQuery の「fadeOut」関数が使用されているにもかかわらず、ページが読み込まれるとすぐに左側の項目 (「Burgundy」など) をクリックすると、右側の画像 (div コンテナーによってカプセル化された) がアニメーションなしで消えます。

最初の変更後、fadeOut 関数は期待どおりに動作し、右側の div がフェードアウトし、新しい div がフェードインします。

なぜこれが起こっているのか誰でも理解できますか？

問題のコードは以下のとおりです。

JQuery

$(document).ready(function () {
        $(".catList li").click(function() {

            $(".catList li").removeClass('selectedRange');
            $(this).addClass("selectedRange");
            var clickedItem = $(this).index(".catList li");

            $(".images div").stop().fadeOut('slow', function () {
                $(".images div").removeClass("selectedImageGroup");
            });

            $(".images div:eq(" + clickedItem + ")").delay(750).fadeIn(function () {
                $(".images div:eq(" + clickedItem + ")").addClass("selectedImageGroup");
            });


        });
    });

HTML:

<div class="imageSelector">
        <ul class="catList">
            <li class="selectedRange"><h2>Ivory</h2>Modernist suite featuring with a touch of nostalgia…&lt;/li>
            <li><h2>Burgundy</h2>Contemporary classic...</li>
            <li><h2>Evergreen</h2>Minimalist with a unique shower feature...</li>
        </ul>
        <div class="vertLine">&nbsp;</div>
        <div class="images">
            <div class="imageGroup selectedImageGroup">
                <table class="imageGroupTable">
                    <tr>
                        <td colspan="3" class="imageGroupMainImage">
                            <img src="img/ImageBrowser/B1/Main.jpg" alt="" />
                        </td>
                    </tr>
                    <tr class="imageGroupSmallImages">
                        <td><img src="img/ImageBrowser/B1/Img1.jpg" alt="" /></td>
                        <td><img src="img/ImageBrowser/B1/Img2.jpg" alt="" /></td>
                        <td><img src="img/ImageBrowser/B1/Img3.jpg" alt="" /></td>
                    </tr>
                </table>
            </div>
            <div class="imageGroup">
                <table class="imageGroupTable">
                    <tr>
                        <td colspan="3" class="imageGroupMainImage">
                            <img src="img/ImageBrowser/B2/Main.jpg" alt="" />
                        </td>
                    </tr>
                    <tr class="imageGroupSmallImages">
                        <td><img src="img/ImageBrowser/B2/Img1.jpg" alt="" /></td>
                        <td><img src="img/ImageBrowser/B2/Img2.jpg" alt="" /></td>
                        <td><img src="img/ImageBrowser/B2/Img3.jpg" alt="" /></td>
                    </tr>
                </table>
            </div>
            <div class="imageGroup">
                <table class="imageGroupTable">
                    <tr>
                        <td colspan="3" class="imageGroupMainImage">
                            <img src="img/ImageBrowser/B1/Main.jpg" alt="" />
                        </td>
                    </tr>
                    <tr class="imageGroupSmallImages">
                        <td><img src="img/ImageBrowser/B1/Img1.jpg" alt="" /></td>
                        <td><img src="img/ImageBrowser/B1/Img2.jpg" alt="" /></td>
                        <td><img src="img/ImageBrowser/B1/Img3.jpg" alt="" /></td>
                    </tr>
                </table>
            </div>

        </div>
    </div>
4

2 に答える 2

1

これは、コンテナ divをdisplay: block!important;オーバーライドしているためです。display: none;(うまくいかない理由は説明できませんが、それが原因です。) インライン スタイルを に設定しているため、1 回のクリックで動作しdisplay:block;ます。要素の CSS 行を削除するdisplay:noneと、最初の要素でもフェードが機能します。

破損の例:機能しない、機能する

于 2012-06-08T21:09:50.933 に答える
1

次の行を追加します。

$('.images div:first').show();

直後の

$(document).ready(function () {
于 2012-06-08T21:38:13.350 に答える