Question

我正在尝试编写一些可以创建textareas的javascript，当你点击textarea开始输入时，它会在窗口中生长并居中，直到你点击它缩小回来的位置。

很简单，直到我想添加.animate（），突然间我遇到了一些严重的问题，我正在花费太多时间试图找出答案。

在运行一些质量保证的同时，我发现了许多错误......

- 如果我将焦点放在动态增长动画的文本区域上，那么.blur（）函数无法调用。

- 如果我将焦点转移到另一个textarea，而第一个仍然是动画然后两者都可能仍然很大，无法调用.blur（）函数。

- 最后，中心功能只有一些非常奇怪的活动。 .scrollTo（）和.animate（）表现不佳，尤其是当有很多textareas或我正在挑选一个在众多中间的盒子时。

在播放动画时，有没有办法禁止与网站进行任何互动？

关于如何解决这些问题的任何想法？

javascript ... boxy.js 代码：

function growthearea() {

$('textarea.textfield').blur(function(){
    $(this).animate({ height: "51" }, 500);  //shrink the current box when lose focus
  //$(this).height(51);  
});

    $('textarea.textfield').focus(function(){

    $("*").off("focus,blur,click");  //turn off focus,blur,click while animating

    var wheretoY = $(this).offset().top-73;
    window.scrollTo(17,wheretoY);

        // turn back on focus,blur,click after animation completes
        $(this).animate({ height: "409" }, 1000, function(){("*").on("focus,blur,click")});
        //$(this).height(409);
    });


}


function newboxbtn()
{
    var btn=document.createElement("textarea");
    btn.setAttribute('class','textfield');

    var textlocale = document.getElementById('locale');
    textlocale.appendChild(btn);

    $('textarea.textfield').on('keyup change', function() {
        $('p.display').text('You are typing: ' + $(this).val());  //live update from focused textarea
    });

    growthearea();  //recall function for any new boxes to be acknowledged

};

function jsinit()
{
    $('textarea.textfield').on('keyup change', function() {
        $('p.display').text('You are typing: ' + $(this).val());  //live update from focused textarea
    });

    growthearea(); //call function for initial group of boxes
}

html ... boxy.htm 代码：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="sty.css" />        
    <script src="./jquery.js"></script>
    <script src="./boxy.js"></script>
<script>
    $().ready(function() {
        var $scrollingDiv = $("#scrollingDiv");
        $(window).scroll(function(){            
            $scrollingDiv
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "fast" );          
        });
        jsinit();
    });
</script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
</head>
<body>

    <div class="grid">

        <div class="col-left" id="left">
                        <div class="module" id="scrollingDiv">
            <input type="button" value="add" onclick="newboxbtn()" />
            <p class="display">you are typing </p>
            </div>
      </div> <!--div class="col-left"-->


        <div class="col-midd">
            <div class="module" id="locale">
                            <textarea class="textfield" placeholder="begin typing here..." ></textarea>
                            <textarea class="textfield" placeholder="begin typing here..."></textarea>
      </div>
        </div> <!--div class="col-midd"-->

    </div> <!--div class="grid"-->

</body>
</html>

css ... sty.css 代码：

.textfield {
    width: 97%;
    height: 51;
    resize: none;
    outline: none;
    border: none;
    font-family: "Lucida Console", Monaco, monospace;
    font-weight: 100;
    font-size: 70%;
    background: white;
/*  box-shadow: 1px 2px 7px 1px #0044FF;*/
}

.textfielded {
    width: 97%;
    resize: none;
    outline: none;
    border: none;
    overflow: auto;
    position: relative;
    font-family: "Lucida Console", Monaco, monospace;
    font-weight: 100;
    font-size: 70%;
    background: white;
/*  box-shadow: 1px 2px 7px #FFDD00;*/
}


/*#postcomp {
    width: 500px;
}*/


* {
  @include box-sizing(border-box);
}

$pad: 20px;

.grid {
  background: white;
  margin: 0 0 $pad 0;

  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
    float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-left {
    width: 13%;
}
.col-midd {
    width: 43%;
}
.col-rght {
    width: 43%;
}

.module {
  padding: $pad;


}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}

body {
    padding: 10px 50px 200px;
  background: #001235;

}
h1 {
  color: black;
    font-size: 11px;
    font-family: "Lucida Console", Monaco, monospace;
    font-weight: 100;
}
p {
    color: white;
    }

Answer 1

检查某些内容是否有动画：{非常奇怪！ }

if($('*').is(':animated').length) return;

在动画期间禁止与网站交互

1 个答案: