JQuery Mouseover-Bewegung mit anderer belebter Funktion in Konflikt

Question

im derzeit auf meiner ersten Website- arbeiten, aber mit diesem Stück jquery auf ein kleines Problem ive kommen ... Die Seite ist:

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

Ich habe ein Rollover-Effekt über die gesamten Seiten meiner Website hinweg (wenn Sie den Mauszeiger über den Link bewegen, wird das Wort leicht nach rechts verschoben), kann dies besser auf der Ereignisseite des Programms angezeigt werden.

Aber auf dieser Seite habe ich viel jQuery los ... Wenn geklickt wird, bewegt sich das Wort nach links von der Seite. Aber weil die Maus vorbei ist (das Wort wird bei der Freigabe nach rechts verschoben), schießt das Wort zurück auf den Bildschirm zu seinem ursprünglichen Platz.

Bitte zögern Sie nicht in meinen Code zu sehen, ID wirklich zu schätzen wissen, ich weiß, Sie sind toll, also danke im Voraus! Tom

Hier sind die beiden Konflikt 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

dies Ihre Hover-Effekt nach einem Klick Ereignis unbind wird:

$("#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); 
    }); 
}); 

Sie können es müssen später erneut binden, oder eine andere zu binden, Es hängt davon ab, was Sie erreichen möchten.

Es kann viel einfacher sein, ein andere belebte Funktion zu nutzen, mit + =:

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

edit:

ich Ihren Code gerade lese, das Markup und die CSS ist ein bisschen Ein Durcheinander, ich denke, es macht deine Arbeit härter als es sein sollte.

Ich würde Ihnen empfehlen, zuerst zu versuchen, den HTML und den CSS zu säubern, dann den JS Teil zu behandeln.

Answer 2

was u tun speichern, um den Zustand der Schaltfläche in irgendeiner Variable wie ..

var position = "LEFT OR RIGHT"; 

dann, wenn u die Taste nach links Änderung sendet die Variablen nach links. und im Hover-Ereignis den Wert überprüfen und dann, wenn die Position verlassen wird, dann führe das ganze Ereignis nicht aus und wenn die Position richtig ist, dann führe das Ereignis aus.

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