Question

我想使用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事件也是执行切换的事件。我以一种可以在开始时启用切换的方式构建我的解决方案（取决于窗口大小）。另外，如果在窗口变小的情况下将切换状态设置为on，我就进行了平滑过渡。希望这是你正在寻找的那个！

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

1 个答案: