0

我在使用 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 等的新手。

代码没有做我期望的事情。我希望它在悬停时逐渐将“左”CSS 属性移动到 0px，当鼠标移出内容时，将“左”CSS 属性移动到 -100px。

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

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

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

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

4

3 回答 3

1

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

于 2012-08-10T21:20:43.557 回答
1

确定是否触发事件的快速而肮脏的测试是使用警报功能。例如：

    $("#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。

于 2012-08-10T21:33:15.733 回答
1

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

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

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

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

 alert("Thanks for visiting!");
于 2012-08-10T21:35:48.013 回答