Question

我正在使用jQuery ajax构建一个联系系统。 form的div有一个高度，所以我认为如果当你点击输入（OnFocus）时div会变得更大，当你向上或向下滚动时div会返回到它的常规高度。问题是，点击后，div会变大，然后立即返回到常规高度。这是我的代码：

var big = false,
    lastpalce = "",
    position = "";

function contectboxreturn() {
    if (big) {
        $("#contact").animate({
            "height": "515px"
        }, 400);
        $("#showclosebutton").hide(fast);
        big = false;
    }
}

function contectboxresize() {
    if (!big) {
        big = true;
        lastpalce = $(this).scrollTop();
        position = $("#contact").offset();
        $("html, body").animate({
            scrollTop: position.top + "px"
        }, 400);
        $("#contact").animate({
            "height": "100%"
        }, 400);
        $("#showclosebutton").show(fast);
        $(function () {
            $(window).scroll(function () {
                if (position.top != $(this).scrollTop()) {
                    contectboxreturn();
                }
            });
        });
    }
}

Answer 1

尝试在您的contectboxresize（）函数外面放置滚动事件，如下所示：

var big = false,
lastpalce = "",
position = "";


$(function () {
    $(window).scroll(function () {
        if (position.top != $(this).scrollTop()) {
            contectboxreturn();
        }
    });
});

function contectboxreturn() {
    if (big) {
        $("#contact").animate({
            "height": "515px"
        }, 400);
        $("#showclosebutton").hide(fast);
        big = false;
    }
}

function contectboxresize() {
    if (!big) {
        big = true;
        lastpalce = $(this).scrollTop();
        position = $("#contact").offset();
        $("html, body").animate({
            scrollTop: position.top + "px"
        }, 400);
        $("#contact").animate({
            "height": "100%"
        }, 400);
        $("#showclosebutton").show(fast);
    }
}

Answer 2

将Big设置为TRUE作为动画的回调。像这样。

 $("#contact").animate({
     "height": "100%"
 }, 400, function(){
     big = true;
 });

updated fiddle

功能起得太早

2 个答案: