[英]How to integrate “if” in jquery code
i use jpreloader ( http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/ ). 我使用jpreloader( http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/ )。 When the preloading finishes, i call the header to move to the screen and i call the content by fading to the screen.
预加载完成后,我调用标题将其移至屏幕,然后通过淡入屏幕来调用内容。
My header is a fixed div (as a sidebar), so when someone opens my page from a small screen, i would like that after the preloading, it calls a relative positioned div from the top to the screen. 我的页眉是一个固定的div(作为侧边栏),因此当有人从小屏幕打开我的页面时,我希望在预加载后从顶部到屏幕调用一个相对定位的div。
Everything works with my code without declaring the window width but when i try to "handicrafting" the script with an "if", it stops working. 一切都可以在不声明窗口宽度的情况下使用我的代码,但是当我尝试使用“ if”对脚本进行“手工”制作时,它将停止工作。 I do not know anything about javascript, i tried to fabricate the code with some samples but i can not make it work...
我对javascript一无所知,我试图用一些示例来制作代码,但我无法使其正常工作...
The original javascript which works without window screen declaration : 无需窗口屏幕声明即可工作的原始javascript:
<script type="text/javascript">
<!--
//If browser is IE8 or older we show IE specific page
if(ie < 9){
ieMessage();
}
/*
* Call functions when dom is ready
*/
$(document).ready(function() {
$('#header').css("left",-300);
$('.background').css("left",-1380);
$('#content').css("opacity",0);
// Preload the page with jPreLoader
$('body').jpreLoader({
showSplash: true
}, function() {
$('#header').animate({"left":0}, 1200);
$('.background').animate({"left":-1080}, 100);
$('#content').delay(1000).animate({"opacity":1}, 2500);
});
});
-->
</script>
The code which does not work but what i think it is not far from the truth (i hope) : 该代码不起作用,但我认为与事实相距不远(我希望):
<script>
$(document).ready(function() {
// Function to fade in image sprites
$('.sprite').fadeSprite();
// Function to animate when leaving page
$('.transition, #nav a, #logo, #face a').leavePage();
$('#content').css("opacity",0);
if($(window).width() >= 1023){
$('.background').css("left",-1380);
$('#header').css("left",-300);
}else {
$('.background').css("top",-500);
$('#header').css("top",-230);
},
// Preload the page with jPreLoader
$('body').jpreLoader({
showSplash: true
}, function() {
$('#content').delay(1000).animate({"opacity":1}, 2500);
$('#face').animateHome();
$('#face').resizeFace();
if($(window).width() >= 1023){
$('.background').animate({"left":-1080}, 100);
$('#header').animate({"left":0}, 1200);
}else {
$('.background').animate({"top":-300}, 100);
$('#header').animate({"top":0}, 1200);
}
});
});
</script>
I use the following css : 我使用以下CSS:
#header {
top:0;
bottom:0;
left:0;
position:fixed;
width:300px;
}
#header .background {
position:fixed;
width:600px;
height:10000px;
left:-1080px;
top:-150px;
-webkit-transform:rotate(9deg);
-moz-transform:rotate(9deg);
-ms-transform:rotate(9deg);
-o-transform:rotate(9deg);
transform:rotate(9deg);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
background: #2e3740;
}
@media only screen
and (max-width: 1023px) {
#header {
position: relative;
display: block;
width:100%;
height: 230px;
}
#header .background {
position:relative;
width: 94%;
height:500px;
margin: 0 auto 0;
left: 0px;
top: -300px;
-webkit-transform:rotate(9deg);
-moz-transform:rotate(9deg);
-ms-transform:rotate(9deg);
-o-transform:rotate(9deg);
transform:rotate(9deg);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
background: #2e3740;
}
}
If someone can correct my code... Thanks in advance ! 如果有人可以更正我的代码,请先谢谢!
your have syntax errors,Try this code, the position of {
is wrong and the :
in css
function shouldn't be there. 您有语法错误,请尝试以下代码,
{
的位置错误,并且css
函数中的:
不应该存在。
$(document).ready(function() {
if($(window).width() >= 1023){
$('.background').css("left",-1380).animate({"left":-1080}, 100);
$('#header').css("left",-300).animate({"left":0}, 1200);
}else {
$('.background').css("top",-500).animate({"top":-300}, 100);
$('#header').css("top",-230).animate({"top":0}, 1200);
}
});
Edit Not sure what your javascript logic supposed to be doing but you can combine those like this, 编辑不确定您的javascript逻辑应该做什么,但是您可以像这样将它们结合起来,
<script>
if(ie < 9){
ieMessage();
}
$(document).ready(function() {
if($(window).width() >= 1023){
$('.background').css("left",-1380).animate({"left":-1080}, 100);
$('#header').css("left":-300).animate({"left":0}, 1200);
{
else {
$('.background').css("top",-500).animate({"top":-300}, 100);
$('#header').css("top":-230).animate({"top":0}, 1200);
}
$('#header').css("left",-300);
$('.background').css("left",-1380);
$('#content').css("opacity",0);
// Preload the page with jPreLoader
$('body').jpreLoader({
showSplash: true
}, function() {
$('#header').animate({"left":0}, 1200);
$('.background').animate({"left":-1080}, 100);
$('#content').delay(1000).animate({"opacity":1}, 2500);
});
});
</script>
You code that doesn't work has a brace around the wrong way. 您无法执行的代码会在错误的方式周围出现括号。 This probably happened because of the odd syntax shaping you are using;
发生这种情况的原因可能是您使用的语法格式很奇怪; Try this;
尝试这个;
<script>
$(document).ready(function() {
if($(window).width() >= 1023) {
$('.background').css("left",-1380).animate({"left":-1080}, 100);
$('#header').css("left":-300).animate({"left":0}, 1200);
} else {
$('.background').css("top",-500).animate({"top":-300}, 100);
$('#header').css("top":-230).animate({"top":0}, 1200);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.