しばらくしてページが読み込まれたときにクリックせずに画像をスライドさせたいWebページがあります。次のコードを使用しています。ボタンをクリックするとスライドしますが、ページが読み込まれたときに画像も表示されますが、ページが読み込まれたときにしばらくして最初は画像を非表示にする必要があります
以下は、行われたデモリンクです
しばらくしてページが読み込まれたときにクリックせずに画像をスライドさせたいWebページがあります。次のコードを使用しています。ボタンをクリックするとスライドしますが、ページが読み込まれたときに画像も表示されますが、ページが読み込まれたときにしばらくして最初は画像を非表示にする必要があります
以下は、行われたデモリンクです
関数を抽出し、setTimeout とクリック ハンドラーで呼び出します。
JS
$(document).ready(function() {
setTimeout(slideAround, 5000); // Toggles the slide after 5 seconds
$("input[type=button]").click(slideAround);
});
function slideAround() {
$(".imageone, .imagetwo").slideToggle();
}
アップデート
タイムアウト中に div を非表示にするのではなく表示するには、要素を display:none; に設定するだけです。あなたのCSSで。
CSS
.imageone, .imagetwo
{
[...]
display:none;
}
更新 2
要素を右から左にスライドするには、次のように jQuery UI を使用する必要があります。
$(".imageone, .imagetwo").show("slide",{direction: "right"}, 1000);
ドキュメント準備完了関数の JavaScript で、スライド コードを呼び出すタイムアウトを設定します (ミリ秒単位)。たとえば、1 秒待機します。
$(document).ready(function() {
setTimeout(function () { $(".imageone, .imagetwo").slideToggle(); },1000);
});