0

我有一个图像动画代码集，因此它发生在某些页面更新事件中。它按预期工作。由于更新可能会失败并且我不希望动画永远播放，我希望它在用户单击任意位置或按下某个键时停止。对于按键事件，它正在工作，是这样的：

<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>

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

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

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

4

1 回答 1

3

我认为 jQuery blur() 函数可以做你想做的事。在此处查看更新的代码：

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

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

于 2012-10-10T15:02:37.997 回答