Question

我在使用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）即使LeftSidebarContents和LeftSidebarTab完全覆盖LeftSidebar的每个像素，也会触发'LeftSidebar'的mouseenter / mouseleave？

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

Answer 1

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

Answer 2

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

    $("#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 Box模型，并且可能只是阅读HTML / CSS。

Answer 3

你可能想在0px周围放一些单引号。

请检查：http://api.jquery.com/animate/

复制他们的示例并让他们按照您的需要修改它们。

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

 alert("Thanks for visiting!");

导致html div水平滑动的困难

3 个答案: