我如何添加动画功能

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/