$(function () {

    // box抖动  弹出学校
    $("#box").css('animation', 'box 0.4s')
        .on("animationend", function () {
            $("#imgschool").show().css('animation', 'school 0.6s');
        });

    //学校弹出后 显示笔 和下一步按钮
    $("#imgschool").on("animationend", function () {
        $("#next").animate({ 'opacity': 1 }, 400);
        $("#bi").css('animation', 'bi 0.4s');
    });

    //bi显示后 显示box下面椭圆
    $("#bi").on("animationend", function () {
        $("#bi").css({ 'right': '0', top: '200px' });
        $("#zuo").animate({ 'left': '-15px', top: '360px' }, 400);


        // $("#nv").css('animation', 'nv 4s');
        $("#nv").animate({ opacity: 1 }, 200);
        $("#nan").animate({ opacity: 1 }, 200);
        // $("#nan").css({ opacity: 1 });
    });



    $(".nextToPage").click(function () {
        $("#next").css('animation', 'next 0.2s');
    });
    $("#next").on("animationend", function () {
        window.location.href = 'School.html';
    });


    var winHeight = $(window).height();
    var winWidth = $(window).width();
    //var bodyWidth = $('body').width();
    //var $indexWrap = $('.index-wrap');
    //if (winHeight > winWidth * 1.778) {
    //    $('body').css('height', winHeight);
    //    $indexWrap.css('top', bodyWidth * 1.473);
    //} else {
    //    if (winHeight <= 480 || winHeight <= winWidth * 1.5) {
    //        $('body').css('height', bodyWidth * 1.778);
    //    } else {
    //        $('body').css('height', winHeight);
    //    }
    //    $indexWrap.css('bottom', bodyWidth * 0.2);
    //}


    //规则说明
    var $rule = $('#rule');
    var $coverBg = $('.cover-bg');
    var $ruleOpen = $('#note');
    //var $ruleOpen = $('.index-rule-open');

    $coverBg.fadeIn(300);
    $rule.removeClass('hide').addClass('show');
    $rule.show();

    $rule.on('touchend click', '.rule-close', function (e) {
        e.preventDefault();
        $coverBg.fadeOut(300);
        $rule.removeClass('show').addClass('hide');
        setTimeout(function () {
            $rule.hide();
        }, 200);
        //$ruleOpen.css('top', '20px');
    });
    $coverBg.on('touchend', function () {
        $coverBg.fadeOut(300);
        $rule.removeClass('show').addClass('hide');
        setTimeout(function () {
            $rule.hide();
        }, 200);
        //$ruleOpen.css('top', '20px');
    });
    $ruleOpen.on('touchend', function () {
        
        $coverBg.fadeIn(300);
        $rule.removeClass('hide').addClass('show');
        $rule.show();
        //$ruleOpen.css('top', '40px');
    });
});