仅在某个窗口宽度之上切换动画

我想使用Toggle-Event，但仅当窗口宽度超过一定大小时。 DIV应该始终可见。 我的解决方案有点工作，但是一旦我调整窗口大小，if语句就不再触发了。

任何提示？ 这是链接： http ： //jsfiddle.net/mihaene/wMrjc/

Answer 1

好吧，假设我已经找到了你的问题我只是发布我的解决方案： http ： //jsfiddle.net/5bxLS/

var toggleOn = false; var toggleState = 0; function slideIn() { toggleState = 1; $("#slider").stop().animate({bottom: "-20px"}, 300); }; function slideOut() { toggleState = 0; $("#slider").stop().animate({bottom: "-180px"}, 300) ; }; function setToggle() { if(!toggleOn) { $('#slider').toggle(slideIn, slideOut); toggleOn = true; } }; function clearToggle() { if(toggleOn) { if(toggleState === 1) $('#slider').click(); $('#slider').off('click'); toggleOn = false; } }; function evalToggle() { if ($(window).width() > 500) setToggle(); else clearToggle(); }; //Apparently this does not work in webkit based browsers... /*$(window).resize(evalToggle); evalToggle();*/ //But this works: $(window).resize(evalToggle).resize(); 

为了停止切换，您必须取消绑定事件（在这种情况下是click事件）。 click事件也是执行切换的事件。 我以一种可以在开始时启用切换的方式构建我的解决方案（取决于窗口大小）。 此外，如果将窗口设置为较小，则切换状态设置为on时，我已平滑过渡。 希望这是你正在寻找的那个！