Question

嗨伙计们！我必须使用jquery制作一个滑动div（左 - 右）。这是我目前所拥有的链接：http://www.k-prim.biz/test/test.html 这工作正常，但我不知道如何在将div移动到右边后单击箭头图像使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转换。 See jsfiddle

在这种情况下，点击手柄就像（{b>编辑点击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>

用jquery滑动div

4 个答案: