jquery動畫圖像，位置，寬度和高度

我有一種情況與動畫「img」，當我把我的var完成內部點擊功能它不會動畫，但當我讓它外功能它的工作。它有全球的東西和當地的範圍？謝謝jquery動畫圖像，位置，寬度和高度

var complete = true; 


$("img").click(function() { 

    if (complete) { 

     $(this).animate({ 
      left: "50%", 
      top: "400px", 
      width: "300px", 
      height: "300px" 

     }, 700); 

    } else { 

     $(this).animate({ 
      left: "8px", 
      top: "10px", 
      width: "150px", 
      height: "150px" 
     }, 700); 
    } 

    complete = !complete; 
});

來源

2017-06-21 Djurdjic.Igor

是的，它與全局和局部範圍有關，如果你在變量聲明內部單擊事件函數，意味着函數內的變量作用域 - 函數內的局部作用域，但是當你在函數外部聲明時，意味着你聲明變量作爲全球範圍內的全球範圍，並且您可以在頁面中隨時隨地使用該變量。 –

查看[MDN]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var）或[此文檔]（https://stackoverflow.com/documentation/javascript/480 /範圍＃t = 201706211704131525277） – gaetanoM

如果你把

var complete = true;

回調內部的click處理器，它每次都會被定義爲true被調用的函數，基本上重新定義了功能

$("img").click(function() { 

    if (true) { 

    $(this).animate({ 

     left: "50%", 
     top: "400px", 
     width: "300px", 
     height: "300px" 

    }, 700); 

    } else { 

    $(this).animate({ 

     left: "8px", 
     top: "10px", 
     width: "150px", 
     height: "150px" 

    }, 700); 

    } 

});

並通過進一步簡化：

$("img").click(function() { 

    $(this).animate({ 

    left: "50%", 
    top: "400px", 
    width: "300px", 
    height: "300px" 

    }, 700); 

});

通過在函數的外部定義complete，該變量的值將持續超過該函數的單個調用，從而允許每次調用切換全局狀態。

來源

2017-06-21 16:59:03

非常感謝好友，現在對我更加清楚。 –

jquery動畫圖像，位置，寬度和高度

回答

相關問題