0

I'm having trouble animating this item using PHP and CSS and Javascript (with jQuery). I want a div that slides out from the left side of the screen when its tab bar is hovered over. I have three divs: the container, the contents, and the tab.

Here's the Javascript and 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>

Here's the 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%;
}

I'm new to Javascript, HTML, and et al.

The code isn't doing what I expect it to do. I expect it to, when hovered over, gradually move the 'left' CSS property to 0px, and when the mouse moves off of the contents, move the 'left' CSS property to -100px.

When I hover over it, I see no visible change to the div. I can't even tell if the 'mouseenter()' or 'mouseleave()' functions are even being triggered.

質問: 1) 関数がトリガーされているかどうかを確認するにはどうすればよいですか? Javascript を使用してテキストなどを出力できますか? たぶん、デバッグ用のダイアログ ボックスをポップアップしますか?

2) LeftSidebarContents と LeftSidebarTab が LeftSidebar のすべてのピクセルを完全にカバーしている場合でも、「LeftSidebar」に対して mouseenter/mouseleave がトリガーされますか?

3) 上記のコードで、予期したとおりに動作しない原因となっている明らかな間違いを犯していませんか?

4

3 に答える 3

1

Use ff with firebug or chrome to debug your script. Put a pointer on the functions, this will cause the browser to pauze execution of your script so you can step over it and see what happens.

于 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 Box Model についてもっと学び、おそらく 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 に答える