jQueryのマウスオーバー移動が

Question

イムは、現在、私の最初のウェブサイト - に取り組んが、jqueryののこの部分で若干の問題に来てアイブ他のアニメーション機能と競合...ページは次のとおりです。

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

私が持っています私のウェブサイト上の完成したページ全体にわたるロールオーバ効果（リンク上にマウスを置くと、単語が少し右に移動する）、これはイベントプログラムのページでよりよく見ることができます。

しかし、このページでは、jiveは多くのjqueryを処理しています...クリックすると、単語がページの左に移動します。しかし、マウスを持っているため（リリース時に単語を右に戻す）、単語は画面上で元の場所に戻ります。

私のコードを見て気軽に、IDは本当に感謝しています - 私はあなたが素晴らしいことを知っているので、事前に感謝！トム

ここでは2つの競合する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

これは、クリックイベントの後、あなたのホバー効果をアンバインドします：

$("#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の部分を処理するようにお勧めします。 uは何ができるか

Answer 2

はuが左に、左の変化に変数をボタンを送るときに...

var position = "LEFT OR RIGHT"; 

ようないくつかの変数のボタンの状態を格納しています。 とhoverイベントで値をチェックし、位置が残っている場合は、イベント全体を実行せず、位置が正しい場合はイベントを実行します。

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 
} 
}