Question

我使用jpreloader（http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/）。当预加载完成后，我调用标题移动到屏幕，我通过淡入屏幕调用内容。

我的标题是一个固定的div（作为侧边栏），所以当有人从小屏幕打开我的页面时，我希望在预加载后，它会调用从顶部到屏幕的相对定位div。

所有内容都适用于我的代码而不声明窗口宽度，但是当我尝试用“if”“手写”脚本时，它会停止工作。我对javascript一无所知，我试着用一些样本制作代码，但我不能让它工作......

没有窗口屏幕声明的原始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>

代码不起作用，但我认为它离真相不远（我希望）：

<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>

我使用以下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;
}
}

如果有人可以更正我的代码...... 提前谢谢！

Answer 1

您的语法错误，请尝试使用此代码，{的位置错误，而:函数中的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);
    }

});

修改不确定你的javascript逻辑应该做什么，但你可以将这些结合起来，

Answer 2

你的代码不起作用有一个错误的方法。这可能是因为你正在使用奇怪的语法形状;试试这个;

<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);
    }
});

如何在jquery代码中集成“if”

2 个答案: