避免過渡懸停JS

Question

你好，我有這樣的代碼：

function goto(id, t){ 
    //animate to the div id. 
    $(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 500); 

    // remove "active" class from all links inside #nav 
    $('#nav a').removeClass('active'); 

    // add active class to the current link 
    $(t).addClass('active'); 

} 

這個代碼的主動幻燈片的水平滾動和內幻燈片的單頁都存在更多的div（DIV1，DIV2，DIV3）並且在每個格的附着這樣的代碼：

$("#div1").hover(function() { 
    var $this = $(this); 
    $this.css({'z-index' : '10', 'boxShadow' : '1px 3px 6px #444', 'position': 'fixed' }).animate({ 
     'height': "390", 
     'width' : "840", 
     'marginTop' : "-12", 
     'marginLeft' : "-12", 
    }); 
}, 
function() { 
    var $this = $(this); 
    $this.css({'z-index' : '1', 'boxShadow' : '0px 0px 0px ', 'position': 'static' }).animate({ 
     'height': "350", 
     'width' : "800", 
     'marginTop' : "0", 
     'marginLeft' : "0" 
    }); 
}); 

這是在HTML的代碼：

<a href="#" onClick="goto('#about', this); return false; " > 
<div id="div2" style="background-color:#fff; width:250px;border:1px solid #000;min-height:250px; color:black;"> 
            ABOUT 
           </div></a> 

在PR當我點擊頁面中存在的div時，其中一個幻燈片（例如div1），我需要它在第二頁上水平移動，鼠標在div後面隨滾動移動，而不是留在頁面一，我該如何避免這種情況？

我希望當我點擊系統去幻燈片的第二頁，但不與他同時拖動div我點擊移動到第二頁。

Answer 1

更改了以下代碼，在goto()之內。我在這裏檢查#div2是否在盤旋狀態。

如果是，那麼我將它恢復到原來的狀態，然後我轉到下一頁。

if (parseInt($("#div2").css("z-index"), 10) > 1) { 
    $("#div2").css({ 
     'z-index': '1', 
     'boxShadow': '0px 0px 0px ', 
     'position': 'static' 
    }).animate({ 
     'height': "250", 
     'width': "250", 
     'marginTop': "0", 
     'marginLeft': "0" 
    }, function(){ 
     $(".contentbox-wrapper").animate({ 
     "left": -($(id).position().left) 
     }, 600); 
    }); 
} 
else { 
    $(".contentbox-wrapper").animate({ 
     "left": -($(id).position().left) 
    }, 600); 
} 

檢查它here

UPDATE：

只需添加一個else條件，檢查上面的更新代碼。

Link