的Javascript jQuery的動畫，切換，不能正常工作

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
       #tempc { 
        background-color: #FFFF00; 
        width: 50px; 
        height: 50px; 
       } 
     </style> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

     <script type="text/javascript"> 
      function toggle(){ 
       $("#tempc").toggle(
        function() { 
         $("#tempc").animate({width: 255, height: 300}, 1000, "easeInOutQuad") 
        }, 
        function() { 
         $("#tempc").animate({width: 50}, 1000, "easeInOutQuad") 
        } 
       ); 
      } 
     </script> 

    </head> 
    <body> 

     <div id="tempc" onclick="toggle();"> 
      Hello! 
     </div> 

    </body> 
</html>

你好＃1，我嘗試使用切換動畫中的功能切換，但代碼showen上面似乎沒有工作？哪裏不對？的Javascript jQuery的動畫，切換，不能正常工作

問候

來源

2011-01-31 Thew

jQuery的「切換」功能是用於設置該交替響應點擊處理程序。這段代碼看起來像是在單擊元素後嘗試設置這些處理程序。那是你要的嗎？ – Pointy 2011-01-31 14:10:57

@點，不！ 'hover（fn，fn）'這樣做。 – Cybrix 2011-01-31 14:12:21

更改此：

<body> 

     <div id="tempc" onclick="toggle();">

要這樣：

<body onload="toggle();"> 

    <div id="tempc">

DEMO - except for easing

來源

2011-01-31 14:13:30 qwertymk

設置切換處理器上頁面加載使用jquery 準備好函數。從div中刪除onclick處理程序。檢查這個code。

$(function(){ 
    $("#tempc").toggle(
     function() { 
      $("#tempc").animate({width: 255, height: 300}, 1000); 
     }, 
     function() { 
      $("#tempc").animate({width: 50}, 1000); 
     } 
    ); 
});

來源

2011-01-31 14:17:56 gor

嘗試是這樣的：

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
       #tempc { 
        background-color: #FFFF00; 
        width: 50px; 
        height: 50px; 
       } 
     </style> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

    </head> 
    <body> 

     <div id="tempc"> 
      Hello! 
     </div> 
    <script type="text/javascript"> 
     $().ready(function(){ 
     $('#tempc').toggle(
      function(){ 
      $(this).animate({width: 255, height: 300}, 1000, 'linear') 
        }, 
        function() { 
         $(this).animate({width: 50}, 1000, 'linear') 
        } 
     ); 
     }); 
    </script> 

    </body> 
</html>

的onclick處理器已從div刪除，因爲它使用jQuery的時候是不必要的。

此外，回調中$('#tempc')的實例已更改爲$(this)。這是做事的「正確」方式，我相信這對Javascript引擎更爲有效（糾正我，如果我錯了！）。

另外，您試圖使用"easeInOutQuad"函數作爲緩動函數。據jQuery的文檔，所支持的唯一內置功能swing和linear：

緩解： .animate的其餘參數（）是一個字符串，命名緩動函數使用。緩動功能指定動畫在動畫中內不同點處的進展速度。 jQuery庫中唯一的寬鬆實現默認爲swing，一個以不變的速度前進，稱爲線性。更多的寬鬆功能可以使用插件，最顯着的是jQuery UI 套件。

見jQuery的文檔的更多信息：jQuery Animate()

來源

2011-01-31 14:34:35 mtnorthrop

的Javascript jQuery的動畫，切換，不能正常工作

回答

相關問題