Jquery hasClass animate

私は、pageloadで動作するようにhasClassアニメーションを取得しようとしていますが、明らかにその音よりも難しいです。Jquery hasClass animate

$(document).ready(function() { 
    if ($('html').hasClass('first')) { 
     // Then animate 
    $(".second").animate,500({marginTop: "30px"}); 
    } else { 
     // Then normal 
    $(".second").animate,500({marginTop: "0px"}); 
    } 
});

相続人codepen例

http://codepen.io/Maksketch/pen/ZLrwGM

しかし、これを解決した場合、それは素晴らしいことだ、アニメーションに5秒の遅延を含めることができます！

注：トグル機能は不要です。現在のページをロードするときだけ。

出典

2017-02-01 maksketch

変更$('html').hasClass('first')$('html div').hasClass('first')にも、あなたは

$(document).ready(function() { 
 
    if ($('html div').hasClass('first')) { 
 
    // Then animate 
 
    $(".second").delay(5000).animate({ 
 
     marginTop: "30px" 
 
    }, 500); 
 
    } else { 
 
    // Then normal 
 
    $(".second").animate({ 
 
     marginTop: "0px" 
 
    }, 500); 
 
    } 
 
});

body { 
 
    margin: 0; 
 
    background: #999; 
 
    font-family: arial; 
 
} 
 
.first { 
 
    width: 100%; 
 
    position: relative; 
 
    background: rgba(50, 50, 50, 1); 
 
    color: #FFF; 
 
    padding: 5px 0px 6px 0px; 
 
    text-align: center; 
 
    z-index: 4; 
 
} 
 
.second { 
 
    width: 100%; 
 
    background: rgba(110, 170, 0, 1); 
 
    color: #FFF; 
 
    padding: 5px; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 0; 
 
    border-bottom: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head></head> 
 

 
<body> 
 
    <div class="first">If I exist show second</div> 
 
    <div class="second">Hide me if first is non-existing</div> 
 
</body> 
 

 
</html>

（5000 = 5 seconds）のようなのような遅延使用.delay(time in seconds)については.animate({marginTop: "30px"},500);

をアニメーションを記述する必要があり

出典

2017-02-01 08:11:08

こんにちはカーステン（dansker？）を使用するスニペットで動作しているようです！私のサイトでそれを試してみてください。ありがとうございました！ – maksketch

はい私はデンマーク語ですが、英語で会話をしてください –

複数のエラー。

まず、というクラスを持つのはhtmlではありません。あなたの状態で$(div).hasClass('.first')または単に$('.first')のいずれかを使用することができます。

次に、アニメーションの呼び出しが正しくありません。それは次のようになります。

$(".second").animate({marginTop: "0px"}, 500);

注意あなたが開発者コンソールを開いた場合、それはすなわちUncaught TypeError: 500 is not a function、あなたにエラーを伝えるだろうと。

最後に、遅延を追加するために、あなたは、単にたとえば、 .delayを使用することができます。

$(".second").delay(500).animate({marginTop: "30px"}, 500);

を最後に、あなたが得る：ここ

$(document).ready(function() { 
    if ($('.first')) { 
     // Then animate 
    $(".second").delay(5000).animate({marginTop: "30px"}, 500); 
    } else { 
     // Then normal 
    $(".second").animate({marginTop: "0px"}, 500); 
    } 
});

がworking jsfiddleです。

出典

2017-02-01 08:14:38 Derlin

彼は5秒遅れで0.5秒ではなく、 –

に変更しました。ありがとうございました。 – Derlin

ありがとうございました！しかし、私はCodePenでどのようにテストしますか？またはjsfiddleを使用する必要がありますか？ – maksketch

方が良い$('.first').length

$(document).ready(function() { 
    if ($('.first').length) { 
    // Then animate 
    $(".second").animate({ 
     marginTop: "30px" 
    }, 500); 
    } else { 
    // Then normal 
    $(".second").animate({ 
     marginTop: "0px" 
    }, 500); 
    } 
});

出典

2017-02-01 08:18:30

答えて

関連する問題