jquery - Jquery slideToggleの問題

Question

<script type="text/javascript">
$(document).ready(function(){
         $("#toggle").toggle(
                function(){
                        $("#box1").slideToggle(800,function(){
                                 $("#box2").slideToggle();
                         });
                },
                function(){
                        $("#box2").slideToggle(800,function(){
                                 $("#box1").slideToggle();
                         });
                }
        );        
});
</script>

    <div id="box1">
     <a href="#" class="order" id="toggle">&nbsp;</a>
    </div>
    <div id="box2" style="display:none;">
     <a href="#" class="back" id="toggle">&nbsp;</a>
    </div>

1. 最初のクリックでのみ機能します。もう一度クリックしても元に戻りません。
2. 左から右にスライドするようにアニメーション化する方法は?

Answer 1

<a>これらの要素の両方に同じ「id」値を使用することはできません。あなたは彼らに異なる「クラス」の値を与えました。「class」属性と「id」属性の値を入れ替える必要があるかもしれません。

Answer 2

まず、2 つの要素に対して同じ ID を持つことはできません。次に、jQuery ネイティブ スライド アニメーションは、トップダウン方向でのみ機能します。

<script type="text/javascript">
$(document).ready(function(){
     $(".toggle.order").click(
            function(){
                    $("#box1").slideToggle(800,function(){
                             $("#box2").slideToggle();
                     });
            });
     $(".toggle.back").click(
            function(){
                    $("#box2").slideToggle(800,function(){
                             $("#box1").slideToggle();
                     });
            });    
});
</script>

<div id="box1">
 <a href="#" class="order toggle">&nbsp;</a>
</div>
<div id="box2" style="display:none;">
 <a href="#" class="back toggle">&nbsp;</a>
</div>