JqueryUI (Ajax) Hide() 有效，Show() 无效

Question

我对 JQuery/Ajax 很陌生，而且很长时间没有编写任何 HTML，所以如果这是一个愚蠢的问题，请原谅我。我已经读了相当多的书，但我很茫然。

简而言之，在完成FlipClock.js 倒数计时器后，时钟应该会从页面向右滑出，这样可以正常工作。但是，在启动计时器时，我希望 div 从右侧滑到页面上，但我无法让 div 移动。这是我的代码：

function showTimer() {
$(".clock").show("slide", {direction: "left"}, 2000); //Does nothing, seemingly
timerRunning= true;
var clock = $('.clock').FlipClock(3, {
    countdown: true,
    clockFace: 'MinuteCounter',
    callbacks: {
        stop: function() {
            timerStopped();
        }
    }

});
}

function timerStopped() {
        console.log("Test function on clock stop!");
        $('.clock').hide('slide',{direction:'right'},1000);

        }

我还没有为 clock div 设置任何 CSS，所以我不确定是否需要将其置于屏幕之外，但 hide 可以，所以我有点困惑。

任何意见或建议将不胜感激。

谢谢

Answer 1

经过长时间的调试，终于找到了解决办法。请在 jsfiddle 中尝试一下：https://jsfiddle.net/mLkfyrd8/1/

可能出错的地方：

1. 忘记包装在 $(document).ready()
2. 忘记包含 jQuery/jQuery UI 库
3. 忘记调用 $(".clock").hide()

更新：时钟向上/向下移动似乎存在问题。固定版本见this new fiddle（添加填充）。

演示：

$(document).ready(function() {

    $(".container").hide();

    function showTimer() {

        $('.clock').FlipClock(3, {
            countdown: true,
            clockFace: 'MinuteCounter',
            callbacks: {
                stop: function() {
                    timerStopped();
                }
            }

        });

        $(".container").show("slide", {direction: "left"}, 2000);

    }


    function timerStopped() {
        console.log("Test function on clock stop!");
        $('.container').hide('slide',{direction:'right'},1000);
    }

    showTimer();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.css">
<script src="https://cdn.rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.min.js"></script>

<div class="container" style="padding: 20px;"><div class="clock"></div></div>

Answer 2

您应该为时钟 div 设置尺寸和位置。用例如查找它firebug（按 F12）并搜索您的时钟 div。在那里你应该看到 div 在哪里，它可能在你的视口之外。你得到控制台日志输出了吗？