带有 Javascript 的 Wordpress 插件

Question

我正在开发一个 wordpress 插件，它允许用户输入图像 url 和 konami code。当输入 konami 代码时，会弹出一个图像，但我无法让它动画，我对 jQuery 和 Javascript 有点不熟悉，而且我刚刚开始学习它......任何帮助都会很棒！

<script type="text/javascript" charset="utf-8">
if ( window.addEventListener ) {
  var kkeys = [], konami = "{$this->opts['wpk_code']['current']}";
  window.addEventListener("keydown", function(e){
    kkeys.push( e.keyCode );
    if ( kkeys.toString().indexOf( konami ) >= 0 ){
     var elms=document.getElementById("konami").style;
     elms.display=(elms.display=="block")?"none":"block";
}
  }, true);
}
</script>

Answer 1

试一试 jQuery 的 animate() 上的一些示例 - 它们似乎可以满足您的需求。

Answer 2

试试这个：

$('#inputField').keyup(function () {
            if ($(this).val().length > 0) {
                $('#konami').animate({
                    opacity: 1,
                    left: '50'
                }, 100); 
            }
            else {
                $('#konami').animate({
                    opacity: 0,
                    left: '0'
                }, 100); 
            }
        });

HTML：

<input type="text" id="inputField" />
<img src="..." id="konami" style="position:relative;" />