如何獲得圖像原來的位置

Question

小提琴： https://jsfiddle.net/r73b14y5/3/

腳本工作正常，但不能獲得圖像，如果另一個鏈接沒有點擊到滑回到原來的位置。

此時圖像保持它最後一次懸停的位置，而不是僅在新鏈接被點擊時停留在鏈接處。如果沒有點擊任何東西，可以滑回原始鏈接。

什麼是最好的方式來延遲懸停狀態，以便鼠標飛過元素快速它不激活。懸停意圖。

HTML：腳本的

<div class="bblock1" style="height:100%;"> 
<div class="container"> 
<div class="bodymainMaxS"> 
    <div class='tabbed_content'> 
     <div class='tabs'> 
      <div class='moving_bg'>&nbsp;</div> 
      <span class='tab_item tab_item_color'>OVERVIEW</span> 
      <span class='tab_item'>THE SCIENCE</span> 
      <span class='tab_item'>ORDER</span> 
      <span class='tab_item'>REPLACEMENT FILTERS</span> 
     </div> 
</div> 
</div> 
</div> 
<div class="bblock3" style="height:100%;"> 
<div class="container"> 
<div class="bodymainMaxS"> 

</div> 
</div> 
</div> 

**關鍵部分：**

$(".tab_item").mouseover(function() { 
      var $this = $(this); 
      $this.parent().find(".moving_bg").stop().animate({ 
       left: $this.position()['left'] 
      }, { duration: 300 }); 
    }); 

腳本

var TabbedContent = { 
     current: {i:null, obj:null}, 
     init: function() { 
      $(".tab_item").click(function() { 
      $(".tab_item").removeClass("tab_item_color"); 
      $(this).addClass("tab_item_color"); 
       var $this = $(this); 
       TabbedContent.slideContent($this); 
      }); 
      TabbedContent.current.i = 0; 
      TabbedContent.current.obj = $(".tabslider li").eq(0); 
     }, 
     slideContent: function($obj) { 
      var $container = $obj.closest(".tabbed_content"),   
       $contentContainer = $('.bodymainMaxS'), 
       $tabslider = $contentContainer.find(".tabslider"); 
      var i = $obj.index() - 1; 
      var $lis = $tabslider.find("li"); 
      $new = $lis.eq(i); 
      if(i === TabbedContent.current.i) { 
       return; 
      } 
      $lis.hide().filter($new.add(TabbedContent.current.obj)).show(); 
      var margin_1 = (i > TabbedContent.current.i) ? 0 : -$new.width(); 
      var margin_2 = (i < TabbedContent.current.i) ? 0 : -$new.width(); 
      $tabslider.stop().css({ 
       marginLeft: margin_1 + "px" 
      }).animate({ 
       marginLeft: margin_2 + "px" 
      }, 400); 
      TabbedContent.current.i = i; 
      TabbedContent.current.obj = $new; 
     } 
    } 
    TabbedContent.init(); 

Answer 1

這裏的其餘部分是完整的JS更換固定整個JavaScript與噸他的一個（you can test here with JSFiddle）

去除TabbedContent因爲沒有被使用（如果你需要，你總是可以從你的問題複製）

var isTabSelected = false; 
var lastSelectedTabLeftPos; 
$(".tab_item").mouseover(function() { 
      var $this = $(this); 
      $this.parent().find(".moving_bg").stop().animate({ 
       left: $this.position()['left'] 
      }, { duration: 300 }); 
    }); 
    $(".tab_item").mouseout(function() { 
    if(isTabSelected){ 

    $(".moving_bg").stop().animate({ 
       left: ""+lastSelectedTabLeftPos 
      }, { duration: 300 }); 
    }else 
    { 
    $(".moving_bg").stop().animate({ 
       left: "0" 
      }, { duration: 300 }); 
    } 
     }); 
$(".tab_item").click(function() { 
isTabSelected = true; 
var $this = $(this); 
lastSelectedTabLeftPos = $this.position()['left']; 
});