我正在构建一个响应站点,因此根据窗口的大小需要不同的功能。在调整大小时启用/禁用jquery调用
因此,如果屏幕宽度小于964px,我想禁用我的jquery调用。如果它超过964像素,我想启用相同的调用。
这是我得到: http://jsfiddle.net/frogfacehead/2Mdem/1/
问题是,禁止部分不工作。一旦启用,即使屏幕低于964像素,它也不会禁用。
任何想法?
我正在构建一个响应站点,因此根据窗口的大小需要不同的功能。在调整大小时启用/禁用jquery调用
因此,如果屏幕宽度小于964px,我想禁用我的jquery调用。如果它超过964像素,我想启用相同的调用。
这是我得到: http://jsfiddle.net/frogfacehead/2Mdem/1/
问题是,禁止部分不工作。一旦启用,即使屏幕低于964像素,它也不会禁用。
任何想法?
而不是使用那些资源来把悬停函数作为页面大小的变化,为什么不检查页面的大小在这些回调函数?
$(".test").hover(function() {
if (width > 964) {
$(this).animate({
width: "100px"
})
}
}, etc.
问题是您添加一个函数来处理悬停事件,但该函数永远不会被删除。随着页面宽度的变化,您不断添加它。只需添加一次,然后检查该函数的处理函数中会发生什么。作为正确工作的奖励,它应该更有效一些。
当屏幕的尺寸小于964px您的动画结合。测试元件更大所以解除绑定,你需要做这样的
else {
$body.html('Viewport is ' + mywidth + 'px wide. <span class="disable">[Disable Animation]</span>');
$(".test").unbind("hover");
}
注意,当你不给回调函数的引用调用解除绑定,这将解除绑定所有绑定到它。这可能是需要的,但值得指出。 – Brad 2012-08-16 02:54:25
第一个问题是您正在根据您的调整大小事件绑定加载悬停/动画绑定队列到.test
。
你的实现可以改进(见下文),但如果你想在调整大小完成时触发函数调用,请考虑以下事项。
var resizeTimeout;
$win.resize(function() {
clearTimeout(resizeTimeout);
// handle normal resize as needed
resizeTimeout = setTimeout(function() {
// handle after finished resize
checkwidth($win.width());
}, 250); // delay by quarter second
});
您可以考虑这种方法:
// pull hover binding out, setup once to prevent building up queue
$(".test").hover(function() {
if($(".test").data('annimate')){
$(this).animate({
width: "100px"
});
}
}, function() {
if($(".test").data('annimate')){
$(this).animate({
width: "50px"
});
}
});
function checkwidth(mywidth) {
if (mywidth > 964) {
$body.html('Viewport is <strong>' + mywidth + 'px</strong> wide. <span class="enable">[Enable Animation]</span>');
// set flag to allow annimation
$(".test").data('annimate', true);
} else {
$body.html('Viewport is ' + mywidth + 'px wide. <span class="disable">[Disable Animation]</span>');
// set flag to prevent annimation
$(".test").data('annimate', false);
}
}
优秀的建议。谢谢! – frog 2012-08-16 03:32:56