使用if / else的自適應javascript

Question

我編寫了腳本，使用以下代碼在屏幕頂部（自動隱藏）顯示消息：

    <script type="text/javascript">
    $(document).ready(function(){
        setTimeout(function() {
        $('#dialog2').animate({
            marginTop: "40",
                }, 700);
                },1000);
        setTimeout(function() {
        $('#dialog2').animate({ 
            marginTop: "-80px",
                }, 1500);
        },10000);
     });
    </script>

它運作良好。 現在，我嘗試使用if / else這樣的偽代碼來使marginTop適應不同尺寸的屏幕：

if (window.matchMedia("(min-width: 240px)").matches) {
    marginTop: "20",
} else {
    marginTop: "40", // pseudocode
} 

我努力了

<script type="text/javascript">
    $(document).ready(function(){
        setTimeout(function() {
        if (window.matchMedia("(min-width: 400px)").matches) {
            $('#dialog2').animate({
                marginTop: "40",
                    }, 700);
                    },1000);
        } else {
            $('#dialog2').animate({
                marginTop: "40",
                    }, 700);
                    },1000);
        setTimeout(function() {
        $('#dialog2').animate({ 
            marginTop: "-80px",
                }, 1500);
        },10000);
     });
    </script>

但似乎不起作用。 我是javascript的新手，我認為setTimeout太難為我整數了。

有什么辦法嗎？

Answer 1

您的代碼“ SyntaxError：意外的令牌”中有錯誤。

要解決這個問題

setTimeout(function() { if (window.matchMedia("(min-width: 400px)").matches) { $('#dialog2').animate({ marginTop: "40", }, 700); } else { $('#dialog2').animate({ marginTop: "40", }, 700); setTimeout(function() { $('#dialog2').animate({ marginTop: "-80px", }, 1500); },2000); } },10000);

希望這可以幫助。

Answer 2

好的，使用Firebug我發現了我的錯誤。 下面的代碼運行良好：

    <script type="text/javascript">
    $(document).ready(function(){
        setTimeout(function() {
        if (window.matchMedia("(min-width: 400px)").matches) {
            $('#dialog2').animate({
                marginTop: "40",
                    }, 700);
        } else {
            $('#dialog2').animate({
                marginTop: "20",
                    }, 700);
        }},1000);
        setTimeout(function() {
        $('#dialog2').animate({ 
            marginTop: "-80px",
                }, 1500);
        },10000);
     });
    </script>

Answer 3

<script type="text/javascript">
$(document).ready(function() {
  setTimeout(function() {
    if (window.matchMedia("(min-width: 400px)").matches) {
      console.log('12')
      $('#dialog2').animate({
        marginTop: "20"
      }, 700);
    } else {
      console.log('11')
      $('#dialog2').animate({
        marginTop: "40",
      }, 700);
    }
  }, 1000);

  setTimeout(function() {
      $('#dialog2').animate({
        marginTop: "-80px"
      }, 1500);
  }, 10000);
});

我不知道你的主意。 也許這就是您想要的？