Jquery Mouse Over Movement 与其他动画功能冲突答案

【问题标题】：Jquery Mouse Over Movement conflicting with other animate functionJquery Mouse Over Movement 与其他动画功能冲突
【发布时间】：2026-01-26 20:30:05
【问题描述】：

我目前在我的第一个网站上工作-但我对这段 jquery 遇到了一个小问题...页面是：

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

我的网站上已完成的页面都有翻转效果，（当您将鼠标悬停在链接上时，单词会稍微向右移动）这可以在活动计划页面上更好地看到。

但是在这个页面上，我有很多 jquery 正在运行......当点击这个词时，这个词会移到页面的左边。但是由于鼠标悬停，（释放时将单词移回右侧）该单词在屏幕上弹回到原来的位置。

请随时查看我的代码，我真的很感激 - 我知道你们很棒，所以提前感谢！汤姆

这是两个冲突的代码-

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



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

【问题讨论】：

能否粘贴您认为导致问题的代码？
你试过e.stopPropagation(); ?

标签： javascript jquery jquery-animate mouseover slide

【解决方案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 部分。

【讨论】：

【解决方案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
}
}

【讨论】：