Slider 'jumps' on mouseenter event

Slider 'jumps' on mouseenter event

Hi, I am trying to make a slider and I can not manage to overcome one problem. On mouseenter event sometimes it happens that my slider 'jumps' left or right and then returns to correct state. Here is the code.

  1.  . 
  4. $(function(){
  5. //INIT//
  6.     $('.slider').width($('.slider a').length * 240);
  7.     var $carouselDesktop    = $(".carousel-desktop"),
  8.         $slider    = $(".slider"),
  9.         carouselWidth = $(window).width(),
  10.         sliderWidth = $slider.width(),
  11.         difference = sliderWidth - carouselWidth,
  12.         ratio = difference/carouselWidth,
  13.         margin = 0;

  15.         console.log(sliderWidth);
  16.     $(window).resize(function(){
  17.         carouselWidth = $(window).width();
  18.         sliderWidth = $slider.width();
  19.         difference = sliderWidth - carouselWidth;
  20.         ratio = difference/carouselWidth;
  21.         $slider.css({marginLeft: -difference});

  23.     })

  25. var margin = 0;
  26. var mouseIn =false;

  28. $carouselDesktop.mouseenter(function(event){
  29.     margin = Math.round(event.pageX * (ratio+0.005));
  30.     $slider.stop(true, false).animate({marginLeft: -margin}, 200,function(){mouseIn = true; });
  31. });
  32. $carouselDesktop.mousemove(function(event){
  33.     margin = Math.round(event.pageX * (ratio+0.005));
  34.     if(margin < difference && mouseIn){
  35.         console.log("w mousemove");
  36.         $slider.css({marginLeft: -margin});
  37.     }
  38.         console.log(margin);
  39.     });
  40. $carouselDesktop.mouseleave(function(){
  41.     mouseIn = false;
  42. });
  43. /////////////////////////////////////////DARKEN ON HOVER /////////////////////////////////////////////////
  44. $('.darken').hover(function() {
  45.     $(this).find('img').fadeTo(10, 0.5);
  46. }, function() {
  47.     $(this).find('img').fadeTo(10, 1);
  48. });

  50. });