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。

在这种情况下，点击句柄很简单（编辑点击处理程序 on 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

<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>

这可以帮助您思考算法。

注意：未经测试的代码，已编辑。

Answer 4

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>