Javascript 如何优化这些jquery函数？

我正在开发一个javascript密集型用户界面应用程序。（至少对我来说这是一个密集的项目，这是我第一个认真的javascript项目）

每当滚动

div

或

mouseout

时，我都会使用一些jquery函数。例如，有些

div

是可拖动的对象，因此当它们被

mouseover

ed覆盖时，光标看起来必须准备好移动。但是我的界面太慢了，以至于我的老板认为我的代码不起作用，而事实上我的代码起作用了，但是它太慢了，所以用户有时需要等待2-3秒才能让光标看起来像预期的那样，或者让

div

看起来像预期的那样。只是一个例子。我的代码如下所示，我无法完全或正确地复制它，因为我的公司对此拥有版权，但只是为了清楚地了解我的工作方式：

$.fn.extend({
    mouseoverBox: function() {
    return this.each(function() {
        var $this = $(this);   
                if(!$this.hasClass('ready')) 
                {   if($this.hasClass('activated'))
                    {
                        $this.removeClass('activated');
                    }
                    $this.addClass('ready');
                }
                var img_id = $this.children('.theimg').attr('id');
                //someitem.children('somechildren').remove();
                //someitem.append(somemenu div)
                //$this.draggable();
                //$this.resizable();
                if($this.hasClass('unlocked'))
                {
                    $this.draggable( "option", "disabled", false );
                    $this.resizable( "option", "disabled", false );
                }
                $this.bindUnlock();
            });
     }
// end mouseoverBox
});

现在这只是mouseoverBox函数，它的触发方式类似于

myBox.mouseoverBox（）

。关于鼠标悬停事件。当然，这个插件调用的是

bindUnlock（）

，它有一些简单的操作，比如更改类和向菜单中添加类。此外，在任何鼠标悬停之前，通常都会有一个

mouseout

从另一个

div

。。。正如你所看到的，发生了很多事情。不过，通常在任何时候都不会有超过10个交互式

div

。如何优化这种代码？我没有给出每一个细节，但是相信我，大部分相关的都是这样的

---

我已经压缩了我的javascript、css、图像和字体。我还尝试使用Yahoo Compressor缩小文件大小，但它实际上使我的一个文件膨胀，而不是压缩它。

对于外观和感觉，为什么不在CSS中使用hover伪类来实现这一点，例如：

div.draggable:hover { 
    background:yellow;
    cursor:ponter;
}

---

通过这种方式，您所有的类更改代码都可能被减少。

可能最适合于？但这是否能在Chrome/FF/IE中兼容（至少在IE8之前）？好的，我已经检查过了，它非常兼容。但我的代码并不是那么简单。例如，类的更改不仅仅是在

hover

上。只有当我的

div

有一个特定的类（例如

激活的

）时，某些CSS才会启动。然后将你的hover伪类添加到激活的CSS类中，例如div.activated:hover。