Question

我有一个小问题。我正在创建一个jQuery动画，这个动画有点击点，触发各种动作。在窗口调整大小时，我想重置点击功能，以便在页面刷新时执行不同的操作。

单击按钮A时，

窗口大小1024向左移动...

调整窗口大小...

单击按钮A

时，

窗口大小480向上移动

我有一个调整大小的脚本但是在屏幕调整大小后无法知道如何更新该功能。每次我点击按钮，除非我刷新页面，该功能保持为第一个加载的功能。

$(document).ready(function() {

    if ($(window).width() < 480) {

    $( ".button_a").click(function() {
      $(this).animate({top: '50px'})
    });

    } else ($(window).width() < 1024) {

    $( ".button_a").click(function() {
      $(this).animate({left: '50px'})
    });

}

});

Answer 1

大声笑，你有不正确的按钮分配。简而言之，您编码的内容是：

在文档加载时，如果窗口小于480，则告诉按钮单击事件始终为前50px设置动画。但是，如果（document.onload）窗口小于1024，则按钮单击事件应始终设置为左侧50px的动画。

您需要在事件调用中移动if语句，如下所示：

$(function() {  //  Same as $(document).ready, just shorter. Personal pref
    $('button').on('click', function(e) {
        if ($(window).width() <= 480) {
            $(this).animate({top: '50px'})
        }
        else if ($(window).width() < 1024) {
            $(this).animate({left: '50px'})
        }
    });
})

现在接下来的问题是，你确定那些关于窗口大小的if语句吗？你的确切目标是什么？

如何使用$ .resize进行去抖动，以防止反复发射。

＆＃13;

/**	resize(event)
 *	Actual method called when done resizing.
 **/
function resize(e) {
	var w = $(window).width();
	switch (true) {
		case (w <= 480):
			//	do work
			//	window is now 480 or less
			console.info('Window.width is less than or equal to 480');
			break;
		case (w <= 1024):
			//	do work
			//	window greater than 480 but less than 1024
			console.info('Window.width is less than or equal to 1024');
			break;
		default:
			console.info("window.width = " + w);
	}
	console.debug( "Resize method finished funning:\t", { $this: this, $eventArg: e } );
}
/**	onResize(event)
 *	Called whenever window is resize.
 *	This acts as a buffer between the multiple times resize is fired and the resize method being fired.
 **/
function onResize(e) {
	this['__debounce_timer__'] && clearTimeout(this['__debounce_timer__']);
	this['__debounce_timer__'] = setTimeout($.proxy(resize, this, e), 250);
}
//	Same as window.addEventListener('resize', onResize); resize(new Event('resize', {}));
$(window).on('resize', onResize).trigger('resize');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

＆＃13;

在窗口大小调整时重置jQuery函数（响应式设计）

1 个答案:

如何使用$ .resize进行去抖动，以防止反复发射。