jquery animate function - make it toggle

У меня есть следующий фрагмент кода (см. Ниже) и вы хотите сделать функцию переключением - что это лучший способ сделать это?jquery animate function - make it toggle

Thank-you.

<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

Вы ча использовать .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

@Simon - welcome :) –

Это была отличная демонстрация, в которой я пытался работать веками, затем я переключил jsfiddle на использование jquery 1.10.1, и он больше не работал. Кто-нибудь знает альтернативу при использовании 'jquery-1.10.2.min.js'? Редактирование: похоже, он работает до jQuery 1.8.3 при тестировании в jsfiddle. – user1063287

@ 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 animate function - make it toggle

ответ

Смежные вопросы