是否可以悬停在标签上并点击div幻灯片

Question

想要标签箭头在悬停时滑动，但不能移动内容到直到标签被点击，这可能吗？请参阅的jsfiddle例如

小提琴：http://jsfiddle.net/cC4tU/1/

jQuery的

jQuery.extend(jQuery.easing, { 
    easeInOutQuad: function (x, t, b, c, d) { 
     if ((t/=d/2) < 1) return c/2*t*t + b; 
     return -c/2 * ((--t)*(t-2) - 1) + b; 
    } 
}); 

//EXPAND PAGE DIV CONTENT 
var TabbedContent = { 
    init: function() { 
     $(".tab_item").mouseover(function() { 

      var background = $(this).parent().find(".moving_bg"); 

      $(background).stop().animate({ 
       left: $(this).position()['left'] 
      }, { 
       duration: 500 
      }); 

      TabbedContent.slideContent($(this)); 

     }); 
    }, 

    slideContent: function(obj) { 

     var margin = $(obj).parent().parent().find(".slide_content").width(); 
     margin = margin * ($(obj).prevAll().size() - 1); 
     margin = margin * -1; 

     $(obj).parent().parent().find(".tabslider").stop().animate({ 
      marginLeft: margin + "px" 
     }, { 
      duration: 800 
     }); 
    } 
} 

TabbedContent.init(); 

Answer 1

这里的是会缓解加你的动画。第一动画：

$(background).stop().animate({ 
    left: $(this).position()['left'] 
}, { 
    duration: 500 
    easing: 'swing' // the type of easing 
}); 

和第二动画：

$(obj).parent().parent().find(".tabslider").stop().animate({ 
    marginLeft: margin + "px" 
}, { 
    duration: 800, 
    easing: 'swing' // the type of easing 
}); 

Answer 2

的标签箭头滑动悬停添加

$(".tab_item").hover(function(){ 
     var background = $(this).parent().find(".moving_bg"); 

     $(background).stop().animate({ 
      left: $(this).position()['left'] 
     }, { 
      duration: 500 
     }); 
    }); 

和改变这一行

$(".tab_item").mouseover(function() { 

到这个

$(".tab_item").click(function() {