禁用小屏幕.hover()函数jQuery
禁用小屏幕.hover()函数jQuery
提问于 2014-01-29 09:40:24
我可以得到一些jQuery悬停功能的帮助。我的问题是，我正在尝试在div悬停时调用一个slieUp和slideDown函数，但是我想对较小的屏幕禁用这种效果，即当屏幕调整大小时。如果我调整屏幕大小，我需要刷新页面，以便进行更改。也尝试使用$(window).resize而不是$(document).ready，但是在我重新调整窗口大小之前，它是无法工作的。
$(document).ready(function() {
if ($(window).width() > 990 ) {
$('.block_holder').hover(
function(){
$(this).find('.top_half').slideDown(450);
},
function(){
$(this).find('.top_half').slideUp(450);
}
);
}
});回答 3
Stack Overflow用户
回答已采纳
发布于 2014-01-29 09:45:14
尝试一个调整大小的事件处理程序，如
$(document).ready(function () {
$(window).resize(function () {
if ($(window).width() > 990) {
$('.block_holder').on('mouseenter.large', function () {
$(this).find('.top_half').slideDown(450);
}).on('mouseleave.large', function () {
$(this).find('.top_half').slideUp(450);
});
} else {
$('.block_holder').off('mouseenter.large mouseleave.large');
}
}).resize(); //to initialize the value
});演示：小提琴
Stack Overflow用户
发布于 2014-01-29 09:46:39
我建议您在调整大小事件时绑定该函数：
window.onresize = function(event) {
...your code goes here...
}如下所示：
$(document).ready(function () {
window.onresize = function(event) {
if ($(window).width() > 990 ) {
$('.block_holder').hover(
function(){
$(this).find('.top_half').slideDown(450);
},
function(){
$(this).find('.top_half').slideUp(450);
}
);
}
}
}Stack Overflow用户
发布于 2014-01-29 09:47:08
我建议您编写将dom设置为单独函数的代码。然后你可以在每个window.resize上调用它。
$(window).resize(function () {
setblockholder();
});这样，就可以确保滑动/滑下的功能不会在窗口调整大小时刹车。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21427162
复制相关文章
相似问题
腾讯云开发者
