javascript - jqueryでdivをスライドさせる

Question

やあみんな！jqueryを使用してスライディングdiv（左右）を作成する必要があります。これは私が現時点で持っているものへのリンクです：http ：//www.k-prim.biz/test/test.html これはうまくいきますが、矢印の画像をクリックして左のスライドにdivを作成する方法がわかりませんすでに右に移動した後。何か助けはありますか？

ありがとう

Answer 1

スクリプト側ではなく、このコードを試してください。

  $(function(){
       var i = 0;
       $("#clicky").click(function(){
       if(i==0){
           i =1;
           $("#slide").animate({marginLeft:'500px'},'slow', function(){
                 $("img#clicky").attr("src", "right.jpg");
            });
       }else{
          i=0;
          $("#slide").animate({marginLeft:'0px'},'slow', function(){
             $("img#clicky").attr("src", "left.jpg");
          });
        }
   });

}）;

Answer 2

代替案は、css遷移を使用するcssアプローチである可能性があります。jsfiddleを参照してください。

その場合のクリックハンドルは次のように単純です（矢印画像が背景になっているため、クリックハンドラーを編集div#slideします。それに応じてjsfiddleが調整されます）。

$("#slide").click(function(){
    var el= $(this)
       ,isRight = /right/i.test(el.attr('class'))
       ,addremove = isRight ? 'removeClass' : 'addClass';
    el[addremove]('right');
 });​

Answer 3

jqueryの非常に簡単な使用法は以下のようになります

    <script src="jquery.min.js"></script>
 <script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
  $("#flip").click(function () {
          $("#left_panel").toggle("slide", { direction: "left" }, 1000);
    });
});
</script>

Answer 4

<script>
var pos=0;
$(function(){
    $("#clicky").click(function(){
                if(pos==0)
                {
                    $("#slide").animate({marginLeft:'500px'},'slow', function(){
                              $("img#clicky").attr("src", "right.jpg");
                    }); 
                    pos = 1;
                }
                else
                {
                    $("#slide").animate({marginLeft:'0px'},'slow', function(){
                              $("img#clicky").attr("src", "left.jpg");
                    });  
                    pos = 0;
                }
    });            
});
</script>

これは、アルゴリズムについて考えるのに役立つ場合があります。

注意：テストされていないコード、編集済み。