Question

我有一个图像动画代码集，所以它发生在某些页面更新事件中。它按预期工作。由于更新可能会失败，我不希望动画永远播放，我希望每当用户点击任何地方或按键时它都会停止。对于关键的新闻事件它正在发挥作用，是这样的：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function RefreshImg() {
            var src = $('#ocupado').attr('src');
            $('#ocupado').attr('src', src);
        }

        function processando() {
            $processando = $('#processando');
            $processando.css('z-index', '100').fadeTo('fast', 0.5);
            var left = Math.floor(($processando.outerWidth() - 32) / 2);
            var top = Math.floor(($processando.outerHeight() - 32) / 2);
            $('#ocupado').css('left', left).css('top', top);
            setTimeout(RefreshImg, 50);
            $(document).on('keypress', (function () {
                $processando.fadeOut('fast').css('z-index', '-100');
                $(this).off('keypress');
            }));
        }
    </script>
</head>
<body>
    <div id="processando" style="border:0;position:fixed;display:none;z-index:-100;width:100%;height:100%;background:black;top:0px;left:0px;">
    <img id="ocupado" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif" width="32" height="32" style="position:relative;" border="0" alt="imagem de espera" />
    </div>
    <select id="mySelect"><option>1</option><option>2</option></select>
    <script type="text/javascript">
        $('#mySelect').change(processando);
    </script>
</body>
</html>

问题是当我更改代码以包含click事件时：

            $(document).on('keypress click', (function () {
                $processando.fadeOut('fast').css('z-index', '-100');
                $(this).off('keypress click');
            }));

现在，只要用户更改了选择选项，动画就会启动和停止。就好像点击事件发生在之后更改事件。如何在选择更改后仅在第一次单击时停止动画？

Answer 1

我认为jQuery blur（）函数可以做你想要的。请在此处查看更新的代码：

http://jsfiddle.net/j8fJZ/1/

如您所见，您还可以在keydown上触发模糊。

事件顺序与预期不符

1 个答案: