토글 된 클래스로 div에 애니메이션을 적용하십시오. jquery

Question

일부 요소를 클릭하면 특정 지점으로 내 페이지에 애니메이션을 적용하려고합니다.
이제 버튼을 클릭하여 div의 맨 위로 페이지를 움직일 수있었습니다. 닫기 버튼에 대한 다른 이미지가있는 버튼 클래스를 토글합니다.
새 클래스 .btn_close가있는 버튼을 클릭 할 때 페이지를 애니메이션으로 만들려고하면이 문제가 나타납니다.
asume은 내 코드에서 새로운 클래스를 인식하지 못하는 것처럼 잘못된 것입니다. http://jsfiddle.net/weberjavi/wBkf9/5/

너무 감사 :

$("#content").hide(); 
$("[class^=btn]").click(function() { 
    $(this).toggleClass("btn_open btn_close") 
    if($(this).hasClass("btn_close")){ 
     $(this).text("close") 
    }else{ 
     $(this).text("open") 
    } 
    $("#content").toggle("slow"); 
    return false; 
}); 


$("#btn").click(function() { 
    $('body').animate({ 
    scrollTop: $("#btn").offset().top 
    }, 800); 
}); 

$(".btn_close").click(function() { 
    $('body').animate({ 
    scrollTop: $("#header").offset().top 
    }, 800); 
}); 

나는이 바이올린을했습니다!

EDITED! (25/04/2014)
첫 번째 질문에서 코드를 단순화하려고 시도했지만 실제로는 열림과 닫음 사이를 전환하지 않으려 고합니다. if/else 문장과 함께 코드 덩어리를 사용하지 않고) 두 이미지 사이에서.

$("[class^=arrow]").click(function() { 
    $(this).toggleClass("arrow_down arrow_up"); 
}); 


$("#content_section_1").hide(); 
$("#btn_1").click(function() { 
    $("#content_section_1").toggle("slow"); 
    return false; 
}); 

$("#content_section_2").hide(); 
$("#btn_2").click(function() { 
    $("#content_section_2").toggle("slow"); 
    return false; 
}); 

$("#btn_1").click(function() { 
    $('html, body').animate({ 
    scrollTop: $("#section_1").offset().top 
    }, 800); 
}); 

$("#btn_2").click(function() { 
    $('html, body').animate({ 
    scrollTop: $("#section_2").offset().top 
    }, 800); 
}); 

내가 숨겨진 콘텐츠를 여러 섹션이 내가 헤더의 상단에 전체 페이지 스크롤 나는 부분을 닫을 때마다 원하는 :
내 코드는 다음과 더 유사 보일 것이다.
다른 피들을 만들었습니다 : http://jsfiddle.net/weberjavi/ACH5L/ (어떤 방식 으로든 나는 바이올린에 버튼을 표시하는 방법을 모르겠습니다).
클래스 전환 정보를 저장하는 변수를 작성해야하지만 JS 세계에서 새로운 기능이므로이 지점에 도달하는 방법을 모릅니다.
P.S : G.Mendes는 도움을 많이 주셔서 감사 드리며 오해를해서 죄송합니다.

Answer 1

$('.btn_close').click() 이벤트의 문제점은 이벤트가 선언 된 순간에 존재하지 않아 이벤트가 이 아닌이 여전히 클래스를 수신하므로 요소에 바인딩되어 있다는 것입니다. 지난 2 개 클릭 이벤트를 교체

//was changed so the animation wouldn't interfere in the 
//scrollTop animation upon close 
function open() { 
    $('body, html').animate({ //body & html to work in all browsers 
    scrollTop: $("#btn").offset().top 
    }, 800); 
} 

//changed to be able to be called 
function close(){ 
    $('body, html').animate({ //body & html to work in all browsers 
    scrollTop: $("#header").offset().top 
    }, 800); 
} 

,이 블록을 변경 :

if($(this).hasClass("btn_close")){ 
    $(this).text("close"); 
    open(); //added line 
}else{ 
    $(this).text("open"); 
    close(); //added line 
} 

뿐인 :http://jsfiddle.net/wBkf9/10/

---

을 해결 방법 대신 호출 할 수있는 기능을 확인하는 것입니다

편집 : 퀘스트 이온 편집은 비슷한 문제가 있습니다. 섹션의 현재 상태를 열거 나 닫았는지 확인해야합니다. 또는 닫기 이벤트가 발생하지 않습니다. 예. 체크가 없으면 섹션 오프셋에 항상 애니메이션됩니다.

$("#btn_1").click(function() { 
    //check if its closed to fire close event 
    if($(this).hasClass('arrow_down')) 
    close(); 
    else{ 
    $('html, body').animate({ 
    scrollTop: $("#section_1").offset().top 
    }, 800); 
    } 
}); 

function close(){ 
    $('html, body').animate({ 
    scrollTop: $("#header").offset().top 
    }, 800); 
} 

뿐인 2 : 내가 더 나은 내가 데 문제와 일치하도록 질문을 편집 한 http://jsfiddle.net/ACH5L/2/