jQuery的鼠標在移動與其他動畫功能發生衝突

Question

即時通訊目前正在對我的第一個網站 - 但我特地爲輕微的問題，這一塊的jQuery ...該網頁是：

http://beelinetest.site50.net/the_arts_and_culture_in_worcester.html

我有在我的網站上的整個頁面上出現翻轉效果（當您將鼠標懸停在鏈接上時，這個詞稍微向右移動），這可以在事件程序頁面中更好地看到。

但是在這個頁面上，我得到了很多jquery ......當點擊這個詞時，這個詞就會從頁面的左邊移開。但由於鼠標懸停，（在發佈時將詞語移回右側），該詞在屏幕上回到原來的位置。

請隨時查看我的代碼，我真的很感激它 - 我知道你們很棒，所以提前致謝！湯姆

這裏有兩個相互矛盾的codes-

$("#exploretext").click(function(){ 
$(".moveeverythingleft").animate({"left":"-220px"}, 400); 
return false; 
}); 



$("#exploretext").hover(function(){ 
$("#exploretext").animate({"left":"227px"}, 50); 
}, function(){ 
$("#exploretext").animate({"left":"217px"}, 150); 
}); 

Answer 1

這將click事件後解除綁定您的懸停效果：

$("#exploretext").on("click",function() 
{ 
    $(this).off("hover", "**"); 
    $(".moveeverythingleft").animate({"left":"-220px"}, 400); return false; 
}); 

$("#exploretext").on('hover',function() 
{ 
    $("#exploretext").animate({"left":"227px"}, 50); }, function() 
    { 
     $("#exploretext").animate({"left":"217px"}, 150); 
    }); 
}); 

您可能需要以後重新綁定，或結合其他，這取決於你想達到什麼。

這可能是比較容易的方式來使用其他動畫功能，採用+ =：

$("#exploretext").animate({"left":"+=10px"}, 50, 'linear'); 

編輯：

我讀你的代碼，標記和CSS是有點一團糟，我認爲這會讓你的工作比應該更難。

我建議你先嚐試清理HTML和CSS，然後處理JS部分。

Answer 2

什麼ü可以做的是保存按鈕的狀態在某些變量如..

var position = "LEFT OR RIGHT"; 

那麼當你寄的按鈕向左變變到左。 並在懸停事件中檢查值，然後如果位置是左側，則不執行整個事件，如果位置正確，則執行事件。

function OnExploreClick(){ 
position = 'left'; 
//ur code 
} 

function OnUnExploreClick() 
{ 
//put the button to right side// ur code 
then position = 'right'; 
} 
function OnHover() 
{ 
if (position == 'right') 
{ 
//execute ur code 
} 
}