导致html div水平滑动的困难答案

【问题标题】：Difficulties causing html div to slide horizontally导致html div水平滑动的困难
【发布时间】：2012-08-10 21:09:25
【问题描述】：

我在使用 PHP、CSS 和 Javascript（使用 jQuery）为该项目设置动画时遇到问题。我想要一个当它的标签栏悬停在屏幕左侧时从屏幕左侧滑出的 div。我有三个 div：容器、内容和选项卡。

这里是 Javascript 和 HTML：

<div id="LeftSidebar">
    <div id="LeftSidebarTab" class="">
        Left sidebar tab
    </div>
    <div id="LeftSidebarContents" class="">
        Left sidebar contents
    </div>

    <script type="text/javascript">
        $("#LeftSidebar").mouseenter(function()
        {
                $("#LeftSidebar").animate(
            {
                    left: 0px
            });
        });

        $("#LeftSidebar").mouseleave(function()
        {
                $("#LeftSidebar").animate(
            {
                    left: -100px
            });
        });
    </script>
</div>

这是 CSS：

#LeftSidebar
{
    position: absolute;
    display: block;

    z-index: 12;
    top: 220px;
    left: 0px;

    background-color: green;

    height: 500px;
}

#LeftSidebarTab
{
    float: right;
    background-color: red;
    width: 20px;
    height: 100%;
}

#LeftSidebarContents
{
    background-color: blue;
    width: 100px;
    height: 100%;
}

我是 Javascript、HTML 等方面的新手。

代码没有按照我的预期执行。我希望它在悬停时逐渐将“left”CSS 属性移动到 0px，当鼠标移出内容时，将“left”CSS 属性移动到 -100px。

当我将鼠标悬停在它上面时，我看不到 div 的可见变化。我什至无法判断是否触发了“mouseenter()”或“mouseleave()”函数。

问题： 1）如何检查功能是否被触发？我可以使用 Javascript 输出一些文本或其他内容吗？可能会弹出一个调试对话框？

2) 是否会为“LeftSidebar”触发 mouseenter/mouseleave，即使 LeftSidebarContents 和 LeftSidebarTab 完全覆盖了 LeftSidebar 的每个像素？

3) 我是否在上述代码中犯了任何明显的错误，导致它无法按预期工作？

【问题讨论】：

您可能希望将 Firefox 与 firebug 扩展一起使用。然后您可以更改 css 值并查看会发生什么。但是，Leftsidebar 的左边通常是 0，你想移动它 -100px？

标签： javascript html css

【解决方案1】：

您可能想在 0px 周围加上一些单引号。

检查这个：http://api.jquery.com/animate/

复制他们的示例并让他们根据您的需要进行修改。

关于检查事件是否被触发的警报：

 alert("Thanks for visiting!");

【讨论】：

另外你确定在 HTML 文档中包含了 jQuery 库吗？
是的，绝对包含 jQuery。谢谢，这有帮助。 alert()s 显示 javascript 甚至没有被触发 - 谷歌浏览器的调试给出了一个非常笼统的陈述“未捕获的语法错误：意外的令牌非法”，而没有告诉我哪个令牌是非法的。 翻白眼在花了一天时间试图弄清楚我的纯文本文件中是否意外混合了不可见的 ASCII 字符后，我再次阅读了您的答案，并意识到我仍然缺少单引号 -我一定是第一次错过了。

【解决方案2】：

使用 ff 和 firebug 或 chrome 来调试你的脚本。将指针放在函数上，这将导致浏览器暂停脚本的执行，以便您可以跳过它并查看会发生什么。

【讨论】：

【解决方案3】：

判断事件是否被触发的一个快速而肮脏的测试是使用警报功能。例如：

    $("#LeftSidebar").mouseenter(function()
    {
         alert("Mouse Enters Region");
    });

这也是我将如何处理你的 css 文件：

#LeftSidebar
{
    position: fixed;  
    display: block;

    z-index: 12;
    top: 220px;
    left: -100px;

    background-color: green;
    width:120px;
    height: 500px;
}

#LeftSidebarTab
{
    position:absolute;
    background-color: red;
    width: 20px;
    height: 500px;
    left:100px;
    top:0px;
}

#LeftSidebarContents
{
    background-color: blue;
    position:absolute;
    left:0px;
    top:0px;
}

我建议您了解更多有关 CSS 盒模型的信息，并且可能只是阅读一般的 HTML/CSS。

【讨论】：