如何获得图像原来的位置

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']; 
});