Jquery 鼠标悬停在与其他动画函数冲突的移动上

Jquery Mouse Over Movement conflicting with other animate function

本文关键字：冲突 函数 移动 动画 其他 鼠标 悬停 Jquery      更新时间：2023-09-26

>我目前正在我的第一个网站上工作 - 但我在这段 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);
});

这将在点击事件后解除悬停效果的绑定：

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

您可能需要稍后重新绑定它，或者绑定另一个，这取决于您想要实现的目标。

使用另一个 animate 函数可能更容易，使用 += ：

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

编辑：

我正在阅读您的代码，标记和 css 有点混乱，我认为这会使您的工作比应有的更难。

我建议您先尝试清理HTML和CSS，然后再处理JS部分。

你可以做的是将按钮的状态存储在一些变量中，比如.。

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
}
}
相关文章：