切換動畫只在特定窗口寬度

我想使用切換事件，但只有當窗口寬於特定大小時。 DIV應該始終可見。我的解決方案的工作類型，但if-statement不會再觸發，一旦我調整窗口的大小。切換動畫只在特定窗口寬度

任何提示？這裏的鏈接： http://jsfiddle.net/mihaene/wMrjc/

2012-05-09 Michael

有人在嗎？ – Michael

是的，所以我想我有一個解決方案，但我不太清楚如果我正確地得到問題。所以我首先重申了一點：你希望在每個窗口大小中都顯示該框，只要寬度大於500就可以切換，否則你不需要切換。那是對的嗎？ –

確切地說，對於我誤導性的解釋抱歉。 – Michael

好吧，假設我已經想通了你的問題，我只是張貼我的解決方案：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();

爲了停止切換，你將不得不取消綁定的情況下（這在這種情況下是點擊事件）。點擊事件也是執行切換的事件。我以一種可以在開始時啓用切換的方式構建我的解決方案（取決於窗口大小）。另外我做了一個平滑的過渡，如果切換狀態設置爲開，如果窗口變小。希望這是你正在尋找的那個！

來源

2012-05-09 21:16:25

嘿弗洛裏安！非常感謝。我明白了，不瞭解它的細節，但它完美地起作用。我只是不完全明白，爲什麼在我的解決方案中，一旦調整窗口大小，if語句不會再觸發。無論如何：幹得好！ – Michael

對不起，我再次。我複製粘貼你的代碼，並嘗試在網站上。它不起作用。我不知道我在做什麼錯誤：「evalToggle（）」中的「意外標記ILLEGAL」。 if/else語句不應該有括號嗎？我用括號試過，但仍然錯誤。 – Michael

括號內的所有內容都很好（如果只有一條語句，您可以省略這些括號）。爲了知道您的網頁有哪些中斷，我需要源代碼或源代碼的鏈接。如果你在這裏提供它（或給我寫信息），我會簡短看看它！ –

切換動畫只在特定窗口寬度

回答

相關問題