-2

jquery 関数 ".textAnim" は何もしません textTyping_animation(); 正常に動作しますが、.textAnim は動作しません。プラグインコードは次のとおりです。

function textTyping_animation(text,location,speed){
var progress = 0;
var a = setInterval(function(){
    progress++;
    document.getElementById(location).innerHTML = text.substring(0,progress);
    if(progress == text.length){
        clearInterval(a);
    }
},speed);
};
(function($){
$.fn.textAnim = function(text,speed){
    var progress = 0;
    var a = setInterval(function(){
        progress++;
        $(this).html(text.substring(0,progress));
        if(progress == text.length){
            clearInterval(a);
        }
    },speed);
};
})(jQuery);

実行は次のとおりです。

$(document).ready(function(){
starttext = function()
{
    document.getElementById("textbox").style.display = "block";
    //textTyping_animation("Dit is een dummy text!","textbox_inner",70);
        $("#textbox_inner").textAnim("Dit is een dummy text!",70);
}
});

HTML ロード コード:

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript" language="javascript" src="js/jqueryplugins.js" ></script>
<script type="text/javascript" language="javascript" src="js/libraries/gamelibrary.js"></script>
4

2 に答える 2

1

問題は、this渡されるコールバック関数の内部がsetInterval()ウィンドウであり、必要な要素ではないことです。コードを変更しthisて、関数内へのtextAnim()参照（正しい要素を参照します）を保存してから、に渡されるコールバック内でそれを使用しますsetInterval()。

(function($){
    $.fn.textAnim = function(text,speed){
        var progress = 0,
            element = this; // this will be the element in the jQuery object
        var a = setInterval(function(){
            progress++;
            $(element).html(text.substring(0,progress));
            if(progress == text.length){
                clearInterval(a);
            }
        },speed);
    };
})(jQuery);

これが更新されたデモです。

于 2012-11-27T15:44:20.350 に答える
0

変化する

$(document).ready(function(){
starttext = function()
{
    document.getElementById("textbox").style.display = "block";
    //textTyping_animation("Dit is een dummy text!","textbox_inner",70);
        $("#textbox_inner").textAnim("Dit is een dummy text!",70);
}
});

することが

$(document).ready(function(){
starttext = function()
{
    document.getElementById("textbox").style.display = "block";
    //textTyping_animation("Dit is een dummy text!","textbox_inner",70);
        $("#textbox_inner").textAnim("Dit is een dummy text!",70);
}
starttext();
});

そしてそれはうまくいくはずです。

于 2012-11-27T15:24:34.430 に答える