響應jQuery的點擊功能

我要爲特定的寬度，具體點擊的動畫，但它不工作。爲什麼？響應jQuery的點擊功能

下面的例子：

從0 - 959px> anim1從960 - 1279px> anim2從1280至1699年> anim3從1700年 - 開口端> anim4

這裏是我的代碼：

$(document).ready(function(){ 
if ($(window).width() > 959) { 
    $("#mains").click(function(){ 
    anim1(); 
    }); 
} 
}); 

$(document).ready(function(){ 
if ($(window).width() > 1279) { 
    $("#mains").click(function(){ 
    anim2(); 
    }); 
} 
}); 

$(document).ready(function(){ 
if ($(window).width() > 1699) { 
    $("#mains").click(function(){ 
    anim3(); 
    }); 
} 
}); 

$(document).ready(function(){ 
if ($(window).width() < 1700) { 
    $("#mains").click(function(){ 
    anim4(); 
    }); 
} 
});

來源

2014-01-19 user3191542

注意：對於寬度大於1700的所有動畫函數將被稱爲 –

我修復了您的代碼。您不需要那麼多.ready（）。還有一些調試。 http://jsfiddle.net/B2FU9/ – MortenMoulder

謝謝大家的幫助！：=） – user3191542

閱讀，想想它會怎麼做，如果窗口寬度正好是1750：

你的第一個，如果與> 959測試將是真實的，因此將綁定一個單擊處理程序，做anim1()。
第二，如果有> 1279將測試也是真實的，因此會結合其他點擊處理，做anim2()。
> 1699測試將也爲真，綁定第三個點擊處理程序，確實anim3()。
第四個如果測試將是錯誤的，因爲它具有<而不是>，但實際上對於寬度爲1750，您希望anim4()運行。

那麼接下來點擊會叫前三動畫。

你需要什麼是if/else if/else if/else結構，因此只能使用四個animX()函數中的一個。此外，您可能想要在點擊處理程序中執行測試，以便在點擊時使用窗口寬度，而不是頁面加載時的寬度。所以：

$(document).ready(function() { 
    $("#mains").click(function() { 
    var w = $(window).width(); 
    if (w < 960) 
     anim1(); 
    else if (w < 1280) 
     anim2(); 
    else if (w < 1700) 
     anim3(); 
    else 
     anim4(); 
    }); 
});

注意，在點擊處理程序的開始，我已經把$(window).width()入（想象力的名字命名）w變量保存不必重複這兩個函數調用中else if語句。

來源

2014-01-19 14:05:16 nnnnnn

不錯！這是最好的答案！它工作得很好！非常感謝！ – user3191542

您在$(document).ready()根據屏幕大小結合的動畫。例如，當DOM準備就緒並且窗口寬度小於1700時，將僅使用帶有anim4（）的函數。你需要做的是將窗口寬度檢查放在單個綁定中。例如：

$(document).ready(function(){ 
    $("#mains").click(function() { 
     if ($(window).width() < 959) { 
      // do something 
     } else if ($(window).width() < 1700) { 
      // do something else, etc. 
     } 
    }); 
});

來源

2014-01-19 13:46:01 Kaloyan

看來你錯了條件。您也可以只使用一個文檔就緒事件處理程序，並使用if else if語句來區分個案。這些聲明應該專門設置寬度邊界。例如：

if ($(window).width() < 969) { 
    anim1(); 
} else if ($(window).width() >= 970 && $(window).width() < 1200) { 
    anim2(); 
}

寬度是每個人都可以看到的示例。

除，有可能是在動畫*函數的錯誤，但這些錯誤鐵定陷入困境的代碼。

來源

2014-01-19 13:46:29

嘗試寬度尺寸的基礎上

$(document).ready(function(){ 
      if ($(window).width() > 1699) { 
       anim3(); 
      }else if($(window).width() > 1279){ 
       anim2(); 
      }else if($(window).width() > 959){ 
        anim1(); 
      } 
    });

來源

2014-01-19 13:47:05

你要綁定的事件。我會建議通過現有的代碼在事件處理程序來檢查的寬度和執行操作的相應

$(document).ready(function() { 
    $("#mains").click(function() { 
     if ($(window).width() > 959) { 
      anim1(); 
     } 
     if ($(window).width() > 1279) { 
      anim2(); 
     } 
     if ($(window).width() > 1699) { 
      anim3(); 
     } 
     if ($(window).width() < 1700) { 
      anim4(); 
     } 
    }); 
});

來源

2014-01-19 13:47:16 Satpal

請注意，前兩個'else if'情況在此將不會被調用，因爲它們應用的寬度會觸發第一個「if」。 – nnnnnn

響應jQuery的點擊功能

回答

相關問題