0
jQueryがif文を認識するのに問題があります。 CodePenjQuery 'if'文が認識されない
私のサイト内に4ページのトランジションがあります。ページ右、ページ左、ページアップ、ページダウン。連絡先のページは、メインのヒーローセクションの下に見えなくなります。アップとダウンの遷移は接触部分を上下にスライドさせて見えるようにします。問題は、ユーザーが開いて右または左のページをクリックしている場合に連絡先ページを視界から外に戻したいということです。私はクエリにのビューにif文を追加しましたが、それは応答していません。
上記は、上記のCodePenリンクでご覧になれます。正しい方向に私を指しているため@Xufoxへ
$(document).ready(function() {
// if statement that is not working but not sure why???
if ($('.contact-wrapper').css("marginTop") == '-10%') {
$('#down').trigger('click');
}
// --------------------------------------------
$('#pg-right').click(function() {
$('.home-wrapper, .about-wrapper').animate({
marginLeft: '-=100%'
}, 500);
});
$('#pg-left').click(function() {
$('.home-wrapper, .about-wrapper').animate({
marginLeft: '+=100%'
}, 500);
});
$('#up').click(function() {
$('.contact-wrapper').animate({
marginTop: '-=10%'
}, 500);
});
$('#down').click(function() {
$('.contact-wrapper').animate({
marginTop: '+=10%'
}, 500);
});
}).home-wrapper {
position: fixed;
background: blue;
height: 90vh;
left: 0;
width: 100%;
}
.about-wrapper {
position: fixed;
background: green;
height: 90vh;
width: 100%;
left: 100%;
}
.contact-wrapper {
position: fixed;
background: black;
height: 80vh;
width: 100%;
left: 0;
top: 90%;
}
#pg-right,
#pg-left,
#up,
#down {
position: fixed;
font-size: 3em;
color: white;
}
#pg-right {
top: 10%;
left: 80%;
}
#pg-left {
top: 10%;
left: 20%;
}
#up {
top: 50%;
left: 60%;
}
#down {
top: 50%;
left: 40%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="home-wrapper"></div>
<div class="about-wrapper"></div>
<div class="contact-wrapper"></div>
<a href="#" id="pg-right">Right</a>
<a href="#" id="pg-left">Left</a>
<a href="#" id="up">Up</a>
<a href="#" id="down">Down</a>
'$（ '。contact-wrapper'）.css（" marginTop "）'をログに記録し、その結果を確認してください。 – Xufox
@Xufoxああ良い考え。 "0px"を出力し、 "0％"を出力しません。だから、私は 'px'を使ってこれを解決できると思うが、それに対応するためには理想的ではない。私はあなたが '％'を評価する方法を知っているとは思いませんか？ – RuNpiXelruN
常にページを読み込むときには、同じ値（0px）と決して出席しない場合があります。クリックハンドラで処理したいと思うでしょうか？ –