CODEWITHSUNDEEP
javascriptjquery
Ljubo Valevski
Ljubo Valevski

Reputation: 89

Sliding div with jquery

Hy guys! I have to make a sliding div (left-right) using jquery. This is a link to what I have at this moment: http://www.k-prim.biz/test/test.html This works fine but I do not know how to make the div to slides left on clicking the arrow image after it is already moved to right. Any help?

Thanks

Upvotes: 0

Views: 1173

Answers (4)

Shwet
Shwet

Reputation: 1868

very simple use of jquery is just like below

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

Upvotes: 0

KooiInc
KooiInc

Reputation: 123016

Alternative could be a css-approach, using css transitions. See jsfiddle.

The click handle in that case is as simple as (edit click handler on div#slide, because the arrow image is now its background, jsfiddle is adjusted accordingly):

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

Upvotes: 1

Ajai
Ajai

Reputation: 99

Simply try this code instead of your script side.

  $(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");
          });
        }
   });

});

Upvotes: 2

totten
totten

Reputation: 2817

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

This may help you in thinking on an algorithm.

Notice : Not tested code, edited.

Upvotes: 0

Related Questions