JQuery: Ссылка исчезает, когда родитель одушевляет

Question

У меня есть DOM так:

<div id="book-container"> 
    <div id="book-inner"> 
     Contents of slidedown 
    </div> 
    <a href="#" id="book-tab">Slide Down</a> 
</div> 

и у меня есть этот JQuery

$('#book-tab').on('click', function(){ 
    $('#book-container, #book-inner').animate({ 
     'height' : 350 
    }) 
}) 

Он отлично работает, но проблема в том, в то время как #book-container и #book-inner оживляет ссылка #book-tab исчезнет и снова появится, когда закончите анимацию.

Может кто-нибудь объяснить, почему это делается и как это исправить. Это не огромная проблема, но я бы предпочел, если этого не произойдет.

Answer 1

$('#book-tab').on('click', function(e){ 
    $('#book-inner').animate({ 
     'height' : 350 
    }) 
})​ 

Использование анимация только для внутренних дел.

Работая JsFiddle

Answer 2

$('#book-tab').on('click', function(e){ 
    e.preventDefault(); 
    $('#book-container').animate({ // apply animation only one element 
     'height' : 350 
    }) 
})