试图通过改变来制作动画

时间：2013-04-13 03:15:05

标签： javascript jquery

我试图在调用.change（）函数时设置某事物的宽度，但它似乎没有工作。

知道为什么吗？

这是我的代码：

$(document).ready(function(){
    $('#code').change(function(){
        //on change animate a width of +16px increase.
        $(this).animate({width: '+=16'});
    });
});

以下是重新创建问题的js小提琴：http://jsfiddle.net/BUSSX/

5 个答案:

答案 0 :(得分：1)

如果基于之前的question HTML标记：

<button class="I button">I</button>
<button class="O button">O</button>

<input id="code" type="text" disabled />

因此，如果要为文本框的宽度设置动画，则需要在单击按钮时为其设置动画：

$('.button').click(function(event) {
    var text = $(this).text();
    $('input:text').val(function(index, val) {
        return val + text;
    });
    $('#code').animate({width: '+=16'});
});

的 Working Demo

如果基于您的上述问题HTML标记，您需要使用keyup而不是change，并在jsFiddle中包含jQuery库：

$(document).ready(function(){
    $('#code').keyup(function(){
        //on change animate a width of +16px increase.
        $(this).animate({width: '+=16'});
    });
});

Updated Demo

您只需要检查按下了哪个键：

$(document).ready(function(){
    $('#code').keyup(function(e){
        //on change animate a width of +16px increase.        
        if(e.keyCode == 8) { // Backspace pressed
            $(this).animate({width: '-=16'});
        } else {
            $(this).animate({width: '+=16'});
        }
    });
});

Updated Demo

答案 1 :(得分：1)

如果你真的想要一个输入控件的更改事件，那么这是我前面写的一个jQuery插件方法，这样做并且适用于几乎所有输入控件的内容都可以改变的方式，包括drag /删除，复制/粘贴，键入等...它利用了更新的事件，如果它们存在则有助于此，否则它会回退到侦听许多其他事件并查看数据是否已更改。

(function($) {

    var isIE = false;
    // conditional compilation which tells us if this is IE
    /*@cc_on
    isIE = true;
    @*/

    // Events to monitor if 'input' event is not supported
    // The boolean value is whether we have to 
    // re-check after the event with a setTimeout()
    var events = [
        "keyup", false,
        "blur", false,
        "focus", false,
        "drop", true,
        "change", false,
        "input", false,
        "textInput", false,
        "paste", true,
        "cut", true,
        "copy", true,
        "contextmenu", true
    ];
    // Test if the input event is supported
    // It's too buggy in IE so we never rely on it in IE
    if (!isIE) {
        var el = document.createElement("input");
        var gotInput = ("oninput" in el);
        if  (!gotInput) {
            el.setAttribute("oninput", 'return;');
            gotInput = typeof el["oninput"] == 'function';
        }
        el = null;
        // if 'input' event is supported, then use a smaller
        // set of events
        if (gotInput) {
            events = [
                "input", false,
                "textInput", false
            ];
        }
    }

    $.fn.userChange = function(fn, data) {
        function checkNotify(e, delay) {
            var self = this;
            var this$ = $(this);

            if (this.value !== this$.data("priorValue")) {
                this$.data("priorValue", this.value);
                fn.call(this, e, data);
            } else if (delay) {
                // The actual data change happens aftersome events
                // so we queue a check for after
                // We need a copy of e for setTimeout() because the real e
                // may be overwritten before the setTimeout() fires
                var eCopy = $.extend({}, e);
                setTimeout(function() {checkNotify.call(self, eCopy, false)}, 1);
            }
        }

        // hook up event handlers for each item in this jQuery object
        // and remember initial value
        this.each(function() {
            var this$ = $(this).data("priorValue", this.value);
            for (var i = 0; i < events.length; i+=2) {
                (function(i) {
                    this$.on(events[i], function(e) {
                        checkNotify.call(this, e, events[i+1]);
                    });
                })(i);
            }
        });
    }
})(jQuery);

然后，您的代码将如下所示：

$(document).ready(function(){
    $('#code').userChange(function(){
        //on change animate a width of +16px increase.
        $(this).animate({width: '+=16'});
    });
});

在查看代码时，每次更改时输入控件的宽度都会增加16px。你可能应该查看控件中的字符数，并根据它来评估如何处理宽度，因为如果用户点击退格键，这会使事情更加广泛。我可能会做这样的事情，在添加内容时增加项目，但不会缩小它：

$(document).ready(function(){
    $('#code').userChange(function(){
        // on change animate width as chars are added
        // only grow it when the width needs to be larger than it is currently
        var item = $(this);
        var origWidth = item.data("initialWidth");
        var curWidth = item.width();
        if (!origWidth) {
            origWidth = curWidth;
            item.data("initialWidth", origWidth);
        }
        var newWidth = origWidth + (8 * item.val().length);
        if (newWidth > curWidth) {
            item.stop(true, true).animate({width: newWidth}, 500);
        }
    });

});

工作代码示例：http://jsfiddle.net/jfriend00/BEDcR/

如果您希望在以.val()编程方式设置值时执行userChange方法，那么您可以为此创建自己的方法：

$(document).ready(function(){
    function updateWidth() {
        // on change animate width as chars are added
        // only grow it when the width needs to be larger than it is currently
        var item = $(this);
        var origWidth = item.data("initialWidth");
        var curWidth = item.width();
        if (!origWidth) {
            origWidth = curWidth;
            item.data("initialWidth", origWidth);
        }
        var newWidth = origWidth + (8 * item.val().length);
        if (newWidth > curWidth) {
            item.stop(true, true).animate({width: newWidth}, 500);
        }
    }
    $('#code').userChange(updateWidth);

    $.fn.valNotify = function(value) {
        this.val(value);
        this.each(function() {
            updateWidth.call(this);
        });
        return this;
    }
});

然后，您可以使用此更改您的值，它也会自动调整大小：

$("#code").valNotify("foo");

答案 2 :(得分：0)

你忘了加载jQuery，在这里工作正常http://jsfiddle.net/BUSSX/13/ - 你还需要click事件。或者甚至更好地使用keyup事件，以便在输入内容后，文本框的宽度会增加 - http://jsfiddle.net/BUSSX/15/

答案 3 :(得分：0)

IrfanM，您可以考虑增加适当的金额以适应每个字符的输入，而不是按固定金额递增。

除非我的事情过于复杂（并非完全未知），否则这是非常棘手的。

在以下jQuery插件中：

  • 文本输入字段每个都有一个隐藏的<span>，其字体和字体大小与其各自的输入元素相同。
  • <span>元素通过在每次输入字符时接受其输入字段的整个文本的副本来充当“测量棒”。
  • 然后使用<span>加上一个宽大字符宽度的宽度来确定输入字段的宽度。

以下是代码：

(function ($) {
    var pluginName = 'expandable';
    $.fn[pluginName] = function () {
        return this.each(function (i, input) {
            var $input = $(input);
            if (!$input.filter("input[type='text']").length) return true;

            // Common css directives affecting text width
            // May not be 100% comprehensive
            var css = {
                fontFamily: $input.css('fontFamily'),
                fontSize: $input.css('fontSize'),
                fontStyle: $input.css('fontStyle'),
                fontVariant: $input.css('fontVariant'),
                fontWeight: $input.css('fontWeight'),
                fontSizeAdjust: $input.css('fontSizeAdjust'),
                fontStretch: $input.css('fontStretch'),
                letterSpacing: $input.css('letterSpacing'),
                textTransform: $input.css('textTransform'),
                textWrap: 'none'
            };
            var $m = $("<span/>").text('M').insertAfter($input).css(css).text('M').hide();
            var data = {
                'm': $m,
                'w': $m.width()
            };
            $input.data(pluginName, data).keyup(function (e) {
                $this = $(this);
                var data = $this.data(pluginName);
                var w = data.m.html($this.val().replace(/\s/g, "&nbsp;")).width();
                $this.css({
                    'width': w + data.w
                });
            }).trigger('keyup');
        });
    };
})(jQuery);

$(document).ready(function () {
    $('input').expandable();
});

<强> DEMO

这是有效的，因为<span>元素会自动扩展以容纳其文本，而<input type="text">元素则不会。这种方法的一个很棒的特点是不需要测试击键 - 插件会自动响应字符删除，就像它响应字符笔划一样。

它适用于比例和等宽字体，甚至可以适当地剪切和粘贴。

唯一必要的预防措施是将空格转换为非中断空格$nbsp;，否则HTML会将多个空格渲染为<span>元素中的单个空格。

当然，你真的想要每次按键完全增加16px，然后坚持你已有的。

答案 4 :(得分：0)

你的实施检查错误http://jsfiddle.net/3dSZx/，你需要添加jquery来提琴

JS 

$(document).ready(function(){
    $('#push').click(function(){
        //on change animate a width of +16px increase.
        $('#code').animate({ width: '+=16'});
    });    
});
相关问题
最新问题