Jquery 鼠标悬停在与其他动画函数冲突的移动上
Jquery Mouse Over Movement conflicting with other animate function
>我目前正在我的第一个网站上工作 - 但我在这段 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
}
}
相关文章:
- 调试一个简单的jQuery函数;想知道是否与其他代码冲突
- Createjs冲突问题localToLocal不是函数错误
- 两个循环JS函数相互冲突
- 具有相同函数名称的两个 jquery 插件之间的冲突
- 未定义的主干视图不是函数冲突
- Jquery小计函数与js-gst函数冲突
- 我的if和else-if逻辑中的问题以及两个函数的冲突
- ionic框架中的app.js函数冲突
- 解决同时使用高图和树状图时的冲突(f.inArray 不是函数)
- Jquery原型与新函数冲突
- 主干和RequireJS冲突-实例或构造函数
- 单击“jQuery”中的函数冲突
- Javascript 函数冲突
- 函数与 Jquery.min.js 冲突
- Jquery $.ajax 获取响应与将“this”对象嵌套传递到“success”回调函数冲突
- Jquery 与 Venobox 冲突并从全局范围之外调用函数
- JavaScript 函数名称与 jQuery 冲突
- JavaScript 函数冲突
- Jquery 无冲突 - 点击函数 - 多个框架
- 如何避免 jquery 与原型的回调函数中的 $ 冲突