我如何添加動畫功能

Question

我想顯示一些div內容，當用戶點擊一個顯示更多的按鈕，然後隱藏div內容，當用戶點擊隱藏按鈕時，我想用一些動畫製作這個功能。這裏是我的腳本：

$(document).ready(function(){ //Toggling between more results 
    $('.loadMoreDiv').click(function(){ 
     $('#loadMoreDiv').hide(); 
     $('#hideMoreDiv').show(); 
     $('.old_message_block').removeClass('inactive').addClass('active'); 
     $('#messagesLabel').text('showing all messages'); 
    }); 
    $('.lessMoreDiv').click(function(){ 
     $('#hideMoreDiv').hide(); 
     $('#loadMoreDiv').show(); 
     $('.old_message_block').removeClass('active').addClass('inactive'); 
     $('#messagesLabel').text('Most Recent message'); 
    }); 
}); 

和我的jsfiddle是here

Answer 1

嘗試這個，

$(document).ready(function(){ 
    //Toggling between more results 

    $('.loadMoreDiv').click(function(){ 
    $('#loadMoreDiv').hide(); 
    $('#hideMoreDiv').show();  
    $('.old_message_block').slideDown(500).removeClass('inactive').addClass('active'); 
    $('#messagesLabel').text('showing all messages'); 
    }); 

    $('.lessMoreDiv').click(function(){ 
    $('#hideMoreDiv').hide(); 
    $('#loadMoreDiv').show(); 
    $('.old_message_block').slideUp(500).removeClass('active').addClass('inactive');  
    $('#messagesLabel').text('Most Recent message'); 
    });  

}); 

Answer 2

使用jQuery fadeOut()和fadeIn()像這樣：

$(document).ready(function(){ //Toggling between more results 
    $('.loadMoreDiv').click(function(){ 
     $('#loadMoreDiv').hide(); 
     $('#hideMoreDiv').show(); 
     $('.old_message_block').fadeIn(); 
     $('#messagesLabel').text('showing all messages'); 
    }); 
    $('.lessMoreDiv').click(function(){ 
     $('#hideMoreDiv').hide(); 
     $('#loadMoreDiv').show(); 
     $('.old_message_block').fadeOut(); 
     $('#messagesLabel').text('Most Recent message'); 
    }); 
}); 

編輯：應用的功能，以正確的元素。

Answer 3

嘗試

$('#clickme').click(function() { 
    $('#book').toggle('slow', function() { 
    // Animation complete. 
    }); 
}); 

顯示此鏈接http://api.jquery.com/toggle/

Answer 4

速戰速決：http://jsfiddle.net/sureshpattu/JkuW3/1/

但我會寫那個東西完全不同呢：

http://jsfiddle.net/UPWpB/1/