2

jQuery とスワップインおよびスワップアウトできる事前構築済みのクラスを用意しようとしています。これにより、CSS で定義されている jQuery でアニメーションをトリガーします。しかし、何らかの理由で、'right' が -5% から 0% になるように addClass または removeClass を使用すると、遷移が発生しません。要素のスタイルは、アニメーションなしですぐに変更されます。

私のHTML：

<body>
    <ol style="list-style-type:none">
        <li style="top: 20%;" id="about" class="pane closed hidden" onclick="function(event){}">about</li>
        <li style="top: 25%;" id="education" class="pane closed hidden">education</li>
        <li style="top: 30%;" id="experience" class="pane closed hidden">experience</li>
        <li style="top: 35%;" id="contact" class="pane closed hidden">contact</li>
    </ol>
</body>

私のCSS：

.pane {
    transition: opacity 400ms linear, width 80ms ease-in-out, right 200ms ease-out;
    -webkit-transition: opacity 400ms linear, width 80ms ease-in-out, right 200ms ease-out;

    width: 5%;
    height: 3%;
    text-align: left;
    padding-left:20px;
    padding-top:0.5%;
    position: fixed;
    background-color: lightgray;
    overflow:hidden;
    right: 0%;
}
.pane.hidden {
    right: -5%;
}
.pane.closed {
    opacity: 0.6;
}
.pane:hover {
    width: 8%;
    opacity: 0.8;
}

私のJavascript：

$(document).ready(function() {
    setTimeout(function(){$('#about').removeClass('hidden');}, 200);
    setTimeout(function(){$('#education').removeClass('hidden');}, 400);
    setTimeout(function(){$('#experience').removeClass('hidden');}, 600);
    setTimeout(function(){$('#contact').removeClass('hidden');}, 800);
});

明確にするために、クラスの変更は、setTimeout が行うことになっているように、200 ミリ秒間隔で順番に発生します。問題は、それらがトリガーされると、スライドインするのではなく、すぐに表示されることです.

4

1 に答える 1

0

解決しました。Twitter Bootstrap CSS も含めました。どうやら何かが競合していたようです。それが jsFiddle で機能した理由です。私が推測しなければならなかった場合、それはおそらく遷移値または何かを変更していた「hidden」と呼ばれるクラスを使用しています（私が考えるべきだったもの）。回答してくださった方々、お時間と労力を割いていただきありがとうございます。

于 2013-09-07T00:57:21.507 に答える