jquery動畫功能 - 使它切換

我有下面的代碼片段（見下文），並希望使功能切換 - 什麼是最好的方式去做這個？jquery動畫功能 - 使它切換

謝謝你。

<html> 
<head> 
    <title></title> 

<script type="text/javascript" src="js/jquery.js"></script> 

<script> 

$(document).ready(function() 
{ 
    $("#left_pane").css("left","-300px"); 
    $("#middle_pane").css("left","0px"); 

    //toggle the componenet with class msg_body 
    $(".toggle_right_pane").click(function() 
    {  
     $('#left_pane').animate({ 
     left: '0', 
     }, 500, function() { 
     // Animation complete. 
     }); 
     $('#main_pane').animate({ 
     left: '300', 
     }, 500, function() { 
     // Animation complete. 
     });   

    }); 
}); 

</script> 

<style> 

body{ 
    margin: 0; 
} 

#left_pane{ 
    float:left; 
    display:block; 
    width: 300px; 
    height: 100%; 
    overflow:hidden; 
    background: grey; 
    position:absolute; 
    z-index:1 
} 

#main_pane{ 
    float:left; 
    height:100%; 
    left:0px; 
    overflow:scroll; 
    position:absolute; 
    background: red;   
    right:0; 
} 


</style> 

</head> 

<body> 

    <div id="container"> 

     <div id="left_pane"> 
     menu 
     </div> 


     <div id="main_pane"> 
      <a class="toggle_right_pane" href="#">show/hide</a> 
     </div> 

    </div> 

</body> 
</html>

來源

2010-10-21 Simon

切換怎麼樣？像左右交換？喜歡來回穿過頁面？ – jcolebrand 2010-10-21 17:22:56

您CA使用.toggle()兩套功能之間切換，就像這樣：

$(".toggle_right_pane").toggle(function() {  
    $('#left_pane').animate({ left: '0' }, 500); 
    $('#main_pane').animate({ left: '300' }, 500); 
}, function() {  
    $('#left_pane').animate({ left: '-300' }, 500); 
    $('#main_pane').animate({ left: '0' }, 500); 
});

You can test it out here。

另外要小心你的標記，如果你把它看你現在有什麼是這樣的：

$('#left_pane').animate({ left: '0', }, 500, function() { }); 
            ^uh oh

以上後面的逗號會使IE吹墊圈，所以要非常小心這些當你像你一樣分手時。另外，如果你在回調函數中沒有做任何事情，你可以把它關閉。

來源

2010-10-21 17:24:27

太棒了！並感謝資源鏈接jsfiddle.com看起來令人驚歎！ – Simon 2010-10-21 17:57:31

@Simon - welcome :) – 2010-10-21 17:57:59

這是一個很棒的演示，我嘗試了很久以後的工作，然後我切換jsfiddle使用jQuery 1.10.1，它不再工作。有沒有人知道使用'jquery-1.10.2.min.js'時的選擇？編輯：它似乎工作，直到jQuery 1.8.3時，在jsfiddle中測試它。 – user1063287 2013-08-14 14:39:02

@ user1063287也許這樣的事情，用不同的動畫取決於是否活躍與否：

$(function() { 
     $("#left_pane").css("left","-300px"); 
     $("#main_pane").css("left","0px"); 
     $(".toggle_right_pane").addClass('active'); 

     $(".toggle_right_pane").click(function(e){ 
      e.preventDefault(); 
      if ($(this).hasClass("active")) { 
       $('#left_pane').animate({ left: '0' }, 500); 
       $('#main_pane').animate({ left: '300' }, 500);   
       $(this).removeClass("active"); 
      } else { 
       $('#left_pane').animate({ left: '-300' }, 500); 
       $('#main_pane').animate({ left: '0' }, 500); 
       $(this).addClass("active"); 
      } 
      return false; 
     }); 
});

fiddle

來源

2014-06-19 12:55:14 Selo

jquery動畫功能 - 使它切換

回答

相關問題