jQuery 가로 애니메이션 전환

현재 가로로 열리는 다른 탭이있는 쉬운 jQuery 기능을 사용하고 있습니다. 문제는이 문제를 해결하는 데 문제가 있다는 것입니다.

나는 visible이라고하는 variabel을 사용합니다. 이것은 요소의 상태에 따라 참 또는 거짓 중 하나입니다. 그리고이 하나의 요소에 대해 잘 작동하지만 두 개의 요소를 열려면 두 번 클릭해야합니다 먼저 값을 false로 실행되기 전에.

누구에게도이 솔루션을 제공 할 수 있습니까?

<script type="text/javascript"> 
    var visible=0; 
    function getClickedId(clicked_id) { 
     var selectedId = clicked_id; 
     $(document).ready(function() { 

      if (visible ==0) { 
        $('[name='+selectedId+']').animate({width: 300}, "slow"); 
        $('#Wrapper'+selectedId).animate({width: 325}, "slow"); 
        visible=1; 
      } else { 
        $('[name='+selectedId+']').animate({width: 0}, "slow"); 
        $('#Wrapper'+selectedId).animate({width: 25}, "slow"); 
        visible=0; 
      } 
     }); 
    } 
    </script>

(내 코드 삽입이 정확하지 않은 경우 죄송합니다)

출처

2012-06-23 Kugie

에서 [부트 스트랩] (HTTP : // 트위터 .github.com/bootstrap /) 사람들은'data-toggle' /'data-target' 속성을 사용하여 이것을하기위한 정말로 깔끔한 접근법을 가지고 있습니다. 아마도 조금 고급이지만 가치가 있습니다. [데모] (http://twitter.github.com/bootstrap/javascript.html#collapse), [출처] (http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js). – RichardTowers

고마워, 내가 조사 할 것이다. – Kugie

시도 :

<script type="text/javascript"> 
var visible=0; 
function getClickedId(clicked_id) { 
    var selectedId = clicked_id; 
    if (visible == 0) { 
      $('[name='+selectedId+']').animate({width: 300}, "slow"); 
      $('#Wrapper'+selectedId).animate({width: 325}, "slow"); 
      visible=1; 
    } else { 
      $('[name='+selectedId+']').animate({width: 0}, "slow"); 
      $('#Wrapper'+selectedId).animate({width: 25}, "slow"); 
      visible=0; 
    } 
} 
</script>

출처

2012-06-23 18:38:20 mgraph

부분적으로 작동하지만 열린 요소를 닫을 수 없다. 열기 함수를 제공 한 솔루션이 보이더라도 1이 실행된다. – Kugie

@ user1477205 이해, 당신은 무엇을 의미합니까 – mgraph

나는 내 대답 후 코드를 편집 참조하십시오. 그러나 "문서 준비"가 작동하지 않습니다 제거하십시오. – Kugie

$(document).ready(function() { 
    var visible=true; 
    function getClickedId(clicked_id) { 
     $('[name="'+clicked_id+'"]').animate({width: visible ? 300 : 0}, "slow"); 
     $('#Wrapper'+clicked_id).animate({width: visible ? 325 : 25}, "slow"); 
     visible=!visible; 
    } 
});

FIDDLE

출처

2012-06-23 18:50:59 adeneo

jQuery 가로 애니메이션 전환

답변

관련 문제