使用显示/隐藏代码显示上一张幻灯片

Question

我有简单的手动文本滑块，使用显示/隐藏代码。一切都还可以，但是当我点击上一个幻灯片按钮时，当前文本将被隐藏但前一个文本将不会显示。为什么它没有显示？！

这是我的HTML代码：

<div class="hand_1" id="hand_1">
    <img id="hand_img_1" src="myimage1.png" width="176.25" height="332.25" />
    <div class="hand_text_1">
        <h2>header</h2>
        <p>paragraph 1</p>
            <div class="connect-links">
                <a id="next_icon_1" href="#" ></a>
            </div>
    </div>
</div>

<div class="hand_2" id="hand_2" style="display:none;">
    <img id="hand_img_2" src="myimage2.png" width="176.25" height="332.25" />
    <div class="hand_text_2">
        <h2>header 2</h2>
        <p>paragraph 2</p>
            <div class="connect-links">
                <a id="next_icon_2" href="#"></a>
                <a id="previous_icon_2" href="#"></a>
            </div>                              
    </div>
</div>

这是我的javascript：

$(document).ready(function(){
                            $('#next_icon_1').on("click", function(){
                            $('#hand_img_1').fadeOut('fast');
                            $('.hand_text_1').fadeOut('fast');
                            $('.hand_2').fadeIn('fast');
                                });                             
                            $('#previous_icon_2').on("click", function(){
                            $('#hand_img_2').fadeOut('fast');
                            $('.hand_text_2').fadeOut('fast');
                            $('.hand_1').fadeIn('fast');
                            });                             
                        });