Question

我想在菜单栏中实现一个非常简单的效果。我有块显示我网站中的页面链接，带有图标，如

|--------------|
|              |
|              |
|  (BLOG ICON) |     and beneath them I have title bars, hidden from view, seen below
|              |
|              |
|--------------|

|--------------|
|    BLOG      |
|--------------|

我有jQuery代码将鼠标悬停事件附加到父div块，当moused通过父div更改的ICON和COLOR时，它下面的TITLE DIV动画UP。问题是，当它下面的TITLE DIV动画时它会在PARENT DIV上分层，妨碍了鼠标，因此在PARENT DIV上调用MOUSEOUT事件，因为鼠标在那里失去焦点。鼠标输出处理程序然后调用动画按下TITLE DIV，将鼠标重新放回PARENT DIV并调用MOUSEOVER，重复并重复导致和丑陋的闪烁效果。我已经尝试了几乎所有东西来解决这个冒泡问题（布尔指针，DOM重组，返回错误，停止传播等），但我简直感到困惑，因为这样的事情是如此简单和常见。我怎样才能解决这个问题？

* 更新：* 这是我的代码。请注意它是简化的。

$(document).ready(function(){
    /**
        This handles the smooth menu transitions
    */


    var title;

    function glideUp(obj){
        $(obj).animate({
                    bottom: 47
                }, 200);
    }

    function glideDown(obj){
        $(obj).animate({
                    bottom: 0
                }, 200);
    }

    function colorIn(obj){
        var colorto = $(obj).attr("colorto");
        $(obj).animate({
                    backgroundColor: colorto,
                    fontSize: 45
                }, 200);
    }

    function colorOut(obj){
        $(obj).animate({
                    backgroundColor: "black",
                    fontSize: 30
                }, 200);
    }

    $('.menu_item').mouseover(
            //Hover on
            function(e){

                title = $(("#menu_title_"+($(this).attr("item")).toLowerCase()));

                //glide colors
                colorIn(this);


                //glide text
                glideUp(title);
            });

    $('.menu_item').mouseout(
            //Hover out
            function(){
                //glide out colors
                colorOut(this);

                //glide out text
                glideDown(title);
            }
        );


});

令人困惑的DOM / Javascript事件冒泡和DOM布局问题

0 个答案: