Stop jquery effect?? Or stop the javascript

I have a big ul list. Like this:

<ul class="eerstelaag">
    <li class=""><a title="?" href="/">? (14)</a>
        <ul class="tweedelaag" style="display: none;">
            <li><a href="/">Roerstaafjes</a></li>
            <li><a href="/">Thee favorieten</a></li>
            <li><a href="/">Si开发者_如何学Pythonropen</a></li>
        </ul>
    </li>
    <li class=""><a title="?" href="/">? (14)</a>
        <ul class="tweedelaag" style="display: none;">
            <li><a href="/">Roerstaafjes</a></li>
            <li><a href="/">Thee favorieten</a></li>
            <li><a href="/">Siropen</a></li>
        </ul>
    </li>
    <li class=""><a title="?" href="/">? (14)</a>
        <ul class="tweedelaag" style="display: none;">
            <li><a href="/">Roerstaafjes</a></li>
            <li><a href="/">Thee favorieten</a></li>
            <li><a href="/">Siropen</a></li>
        </ul>
    </li>
</ul>

And i have this javascript:

$(function()
        {
            var button = $("#assortiment ul.eerstelaag > li");

            button.hover(function()
            {

                if( button.hasClass("open"))
                {
                    var menuitem = $(this).find("ul"); 
                    menuitem.slideUp(600);

                    button.removeClass("open");     
                }
                else
                {
                    var menuitem = $(this).find("ul"); 
                    menuitem.slideDown(600);

                    button.addClass("open");

                }
            });
        });

When i hover over the first li item. Then the ul in that li is coming and show. But now come the problem. When i going fast hover over the li items. The effect i going crazy. And when i going hover faster and faster. It is a crazy effect.

How can i fix this problem?

You're probably looking for the stop function, which will cancel any currently-running animations on the element. You'd use this on the siblings of the element you're about to animate.

Update: Re my comment below, it looks like avoiding chaotic behavior is much trickier than simply stopping the animation. Here's a rough take:

jQuery(function($) {

  var button = $("#assortiment ul.eerstelaag > li"),
      opening = null,
      closing = null;

  button.mouseover(function() {
    var $this = $(this),
        open;

    if (!$this.hasClass('open')) {
      // If there's an active close operation, cut it short
      if (closing) {
        closing.stop().css("height", "").hide();
        closing = null;
      }

      // If there's an active opening operation, turn it into
      // a closing operation
      if (opening) {
        closing = opening;
        opening = null;
        closing.stop().css("height", "").slideUp(600, clearClosing);
      }

      // Is any sibling open? If so, unmark it it...
      open = $this.siblings('li.open');
      open.removeClass('open');
      if (!closing) {
        // ...and since the sibling wasn't still actively
        // opening (that's handled above), close it
        closing = open.find('ul:first');
        closing.stop().css("height", "").slideUp(600, clearClosing);
      }

      // Open
      $this.addClass('open');
      opening = $this.find('ul:first');
      opening.slideDown(600, clearOpening);
    }
  });

  // Callback used when we're done closing, to clear
  // our tracker
  function clearClosing() {
    if (closing && closing[0] === this) {
      closing = null;
    }
  }

  // Callback used when we're done opening, to clear
  // our tracker
  function clearOpening() {
    if (opening && opening[0] === this) {
      opening = null;
    }
  }
});

Live example

Note that when stopping the animation, I had to explicitly clear the height because it could get left in an intermediate state by slideUp / slideDown. You could probably use classes for tracking the actively opening/closing items, rather than the vars I used.

I should mention that in the above I went with putting the "open" class on the li containing the ul, whereas in your original, the "open" class was on the ul itself. If it was purely a marker (you weren't using it in your stylesheets), great; if not, I expect you could modify the above to go back to using the "open" class on the ul, or update the stylesheets to use li.open > ul selector instead of the ul.open selector to style them.