2012-03-30 3 views
0

중간에 div 애니메이션을 사용하여 하나의 메뉴를 만들었습니다. 구조화되어 있습니다. 현재 div 메뉴가 고정 된 너비의 오른쪽으로 확장되는 열린 버튼을 클릭했을 때 나타납니다. 하지만 내 요구 사항은 열려있는 "닫기"단어 대신 메뉴를 확장 한 후 추가해야합니다. "닫기"div 메뉴를 클릭하면 이전 폭으로 축소되고 닫기 대신 "열기"가 나타납니다.jquery 반환 함수를 작성하는 방법

답변

1

animate 함수에는 콜백을 제공 할 수있는 완전한 매개 변수가 있습니다.

이 콜백은 이벤트가 완료된 후에 트리거됩니다. 이 콜백에서 값을 편집 할 수 있습니다.

님의 수업 내용을 '종료'로 변경하십시오. 또한 '라이브'바인딩을 사용하십시오. 이것은 동적 인 html을 변경하는 경우에도 작동합니다.

CSS :

.open{ 
    cursor:pointer; 
    background:black; 
    color:white; 
} 
.close { 
    cursor:pointer; 
    background:black; 
    color:white; 
} 

JS : 당신의 대답에 대한 모든 감사의

$(".open").live('click', function() { 
$("#navMenu").animate({ 
    width: "82px" 
}, { 
    queue: false, 
    duration: 500, 
    complete: function() { 
     $(".open").text("<- CLOSE"); 
     var $this = $(".open"); 
     $this.removeClass(); 
     $this.addClass("close"); 
    } 
}); 
}); 

$(".close ").live('click', function() { 
$("#navMenu ").animate({ 
     width: "50px" 
    }, { 
     queue: false, 
     duration: 500, 
     complete: function() { 
      $(".close").text("OPEN - >"); 
      var $this = $(".close"); 
      $this.removeClass(); 
      $this.addClass("open"); 
     } 
    }); 
});​ 
+0

우선하지만, 그냥 내가 내 바이올린에 배치 내 코드를 배치했으나 제대로 동작하지 않습니다. – user1254422

+0

나는 그것을 허공에서 썼다. 코드를 업데이트했습니다. 당신의 바이올린에서 테스트했습니다 :) – Yoeri

+0

감사합니다 ... 가까운 텍스트가오고 있지만 닫은 후에 다시 열어야합니다. 열려 있어야합니다 .... 당신이 이해할 수 있기를 바랍니다. – user1254422

관련 문제