Can I destroy this function or mousemove event?

Question

Can I destroy this function or mousemove event?

I have some code in jQuery that is giving me headaches. I found this code online that I serviar for mousemove effect when passing over the elements, but wanted to know how can destuir supplement or delete the event when I leave him.

An example I have is as follows:

$("#icons").mouseenter(function(e) {
    $(this).find('div').slidemouse();
});

$("#icons").mouseleave(function(e) {
    $(this).find('div').slidemouse('destroy');
});

Code plugin:

(function($) {
    $.fn.slidemouse=function(options) {
        var defaults=
            {
            height:'240px',
            widthExpand:true,
            mirror:false,
            mirrorOpacity:.3
        };
        var opts=$.extend(defaults,options);
        var expands=1;
        var galleryWidth=0;
        var self=this;
        self.css('overflow','hidden');
        self.children().css('height',opts.height);
        self.children().children().each(function(index) {
            galleryWidth=galleryWidth+$(this).outerWidth(true)
        }
        );
        if(opts.widthExpand) {
            while(galleryWidth<self.width()) {
                self.children().children(":nth-child("+expands+")").clone().appendTo(self.children());
                galleryWidth=galleryWidth+self.children().children(":nth-child("+expands+")").outerWidth(true);
                expands++
            }
        }
        self.children().css("width",galleryWidth);
        if(opts.mirror) {
            self.clone().insertAfter(self).attr("id","");
            self.next().fadeTo(0,opts.mirrorOpacity)
        }
        if(opts.widthExpand||opts.mirror) {
            $(window).bind("resize",resizeWindow)
        }
        function resizeWindow() {
            if(opts.widthExpand) {
                galleryWidth=0;
                self.children().children().each(function(index) {
                    galleryWidth=galleryWidth+$(this).outerWidth(true)
                });
                while(galleryWidth<self.width()) {
                    self.children().children(":nth-child("+expands+")").clone().appendTo(self.children());
                    galleryWidth=galleryWidth+self.children().children(":nth-child("+expands+")").outerWidth(true);
                    expands++
                }
                self.children().css("width",galleryWidth);
                if(opts.mirror) {
                    self.next().remove();
                    self.clone().insertAfter(self).attr("id","");
                    self.next().fadeTo(0,opts.mirrorOpacity)
                }
            }
        }
        $(this).parent().mousemove(function(e) {
            var x=e.pageX-this.offsetLeft;
            var calc=(self.children().width()-self.width())/self.width();
            var left=x*calc;
            var right=(self.width()-x)*calc;
            self.stop().animate({scrollLeft: left}, 500);
            if(opts.mirror) {
                self.next().stop().animate({scrollLeft: right}, 500);
            }
        })
    }
}
)(jQuery);

Answer 1

This plugin has no methods for the particular task you need in your code. You can just bind/unbind events to prevent the plugin's routines from firing. Use $(this).unbind('event') when appropriate. As an alternative, you could try to modify the plugin's code by adding a destroy flag to it:

var defaults=
        {
        height:'240px',
        widthExpand:true,
        mirror:false,
        mirrorOpacity:.3,
        destroy: false
};

var opts=$.extend(defaults,options);
var self=this;

if(destroy) {

self.stop();
self.children().stop();

}

Now you can use the new option on mouseleave as:

$(this).slidemouse({destroy: true});