1

我正在尝试编写一些将创建 textarea 的 javascript，当您单击 textarea 开始键入时，它会在窗口中增长并居中，直到您单击它并缩小它为止。

很简单，直到我想添加 .animate() 突然我遇到了一些严重的问题，我花了太多时间试图弄清楚。

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

- 如果我将注意力放在正在为其增长设置动画的文本区域上，而它仍在动画中，那么 .blur() 函数将无法调用。

- 如果我将焦点转移到另一个文本区域，而第一个文本区域仍在制作动画，那么两者都可能仍然很大，无法调用 .blur() 函数。

-最后，居中功能有一些非常奇怪的活动。.scrollTo() 和 .animate() 一起表现不佳，尤其是当有很多 textarea 或者我正在选择一个在许多中间的框时。

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

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

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

1 回答 1

0

检查是否有动画：{ 肯定很奇怪！}

if($('*').is(':animated').length) return;
于 2013-06-06T13:55:48.690 回答