In IE8, my code is very slow. But in Safari, firefox, chrome it works fine

Question

iam is stuck now, I really hope someone can tell me about problems that I really don’t see.

The problem is that the menu works fine in Safari, FF, Chrome. But when I open IE8 so slowly, when I click on another area of ​​the menu. Or better, the whole menu is so slow!

html id and class

  <div class="oe_wrapper">
     <ul id="oe_menu" class="oe_menu">

this is my javascript code:

$(function () {
    var $oe_menu = $('#oe_menu');
    var $oe_menu_items = $oe_menu.children('li');
    var $oe_overlay = $('#oe_overlay');

    $oe_menu_items.bind('mouseenter', function () {
        var $this = $(this);
        $this.addClass('slided selected');
        $this.children('div').css('z-index', '9999').stop(true, true).slideDown(300, function () {
            $oe_menu_items.not('.slided').children('div').hide();
            $this.removeClass('slided');
        });
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('selected').children('div').css('z-index', '1');
    });

    $oe_menu.bind('mouseenter', function () {
        var $this = $(this);

        $this.addClass('hovered');
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('hovered');

        $oe_menu_items.children('div').hide();
    })
});

this is my menu code:

<div class="oe_wrapper">


    <ul id="oe_menu" class="oe_menu">

        <li><a href="#">Lipsum</a>
            <div>
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                </ul>
            </div>
        </li>


        <li><a href="#">PRODUCTEN</a>
            <div style="left:-191px;">
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Persen</a></li>
                </ul>


                </ul>
            </div>
        </li>
        <li><a href="#">Lipsum</a>
            <div style="left:-383px;">
                <ul class="oe_full">
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>

                </ul>
            </div>
        </li>


        <li><a href="#">Lipsum</a>
            <div style="left:-575px;">
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                                    <li><a href="#">Lipsum</a></li>
                </ul>
            </div>
        </li>



        <li><a href="#">CONTACT</a>
            <div style="left:-767px;">
                    <ul>
                    <li class="oe_heading">Lipsum/li>
                                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                </ul>

            </div>
        </li>
    </ul>   
</div>

Answer 1

Performance elimination probably occurs in dom-traversal-on-event. Ie8, as you know, slowly moves around dom.

One way is to pre-cross and cache the results as follows:

$(function () {
    var $oe_menu = $('#oe_menu');
    var $oe_menu_items = $oe_menu.children('li');
    var $oe_overlay = $('#oe_overlay');

    $oe_menu_items.each(function(){
        var $this = $(this);
        $this.data('div-children', $this.children('div'));                  
    });

    $oe_menu_items.bind('mouseenter', function () {
        var $this = $(this);
        $this.addClass('slided selected');
        $this.data('div-children').css('z-index', '9999').stop(true, true).slideDown(300, function () {
            $oe_menu_items.not('.slided').data('div-children').hide();
            $this.removeClass('slided');
        });
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('selected').data('div-children').css('z-index', '1');
    });

    $oe_menu.bind('mouseenter', function () {
        var $this = $(this);

        $this.addClass('hovered');
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('hovered');

        $oe_menu_items.children('div').hide();
    })
});

Answer 2

live delegate.