切换动画仅在特定窗口宽度以上 [英] Toggle-Animation only above certain window-width
问题描述
我想使用Toggle-Event,但仅当窗口大于特定大小时才使用. DIV应该始终可见. 我的解决方案有效,但是一旦调整窗口大小,if语句就不会再触发.
I want to use a Toggle-Event, but only when the window is wider than a certain size. The DIV should be visible all the time though. My solution kind of works, but the if-statement doesn't trigger anymore, once I resize the window.
有任何提示吗? 这是链接: http://jsfiddle.net/mihaene/wMrjc/
Any hints? Here's the link: http://jsfiddle.net/mihaene/wMrjc/
推荐答案
好吧,假设我已经解决了您的问题,我就发布我的解决方案: http://jsfiddle.net/5bxLS/
Ok, assuming that I have figured out your problem I just post my solution: 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时,我会进行平滑过渡. 希望这是您要搜索的那个!
In order to stop the toggling you will have to unbind the event (which is click event in this case). The click event is also the one that executes the toggling. I build my solution in a way that toggling can be enabled in the beginning (depending on the window size). Additionally I've made a smooth transition if the toggle state was set to on if the window is made smaller. Hope this was the one you were searching for!
这篇关于切换动画仅在特定窗口宽度以上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!