CODEWITHSUNDEEP
javascriptjquery
Mr.Smithyyy
Mr.Smithyyy

Reputation: 1329

Animate a div sliding with a toggle button

I can't seem to figure out how to animate my div sliding with a toggle button.

I tried using variables but I have multiple of these and I am creating too many variables to keep track of the clicks on each of them.

$(document).ready(function() {
  
  $('#toggle-sidebar').click(function() {
    $('#sidebar').animate({
      left: '200'
    }, 500);
  });
  
});
#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 20em;
  height: 70vh;
  background:#333;
}

#toggle-sidebar {
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="sidebar"></div>

<a href="#" id="toggle-sidebar">Toggle</a>

Upvotes: 0

Views: 1790

Answers (4)

blex
blex

Reputation: 25634

Please note that this method uses CSS transitions, and is not supported by IE9 and older. If that's a concern for you, keep using jQuery to animate your divs, and save their state by toggling a class on them.

If you have multiple divs to move, use classes instead of IDs. And toggle a class on them:

$('.toggle-sidebar').click(function() {
    $(this).next().toggleClass('moved');
});
.sidebar {
  position: relative;
  left: 0;
  width: 20px;
  height: 20px;
  background: #333;
  -webkit-transition: left .5s ease;
  transition: left .5s ease;
}
.sidebar.moved {
  left: 200px;
}
.toggle-sidebar {
  float: right;
  margin-right: 90px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="toggle-sidebar">Toggle</div>
<div class="sidebar"></div>

<div class="toggle-sidebar">Toggle</div>
<div class="sidebar"></div>

<div class="toggle-sidebar">Toggle</div>
<div class="sidebar"></div>

<div class="toggle-sidebar">Toggle</div>
<div class="sidebar"></div>

Upvotes: 2

ahmadMarafa
ahmadMarafa

Reputation: 1346

(document).ready(function() {

$('#toggle-sidebar').click(function() {
    if($("#sidebar").hasClass("animated")) {
        $("#sidebar").removeClass("animated") ;
        $('#sidebar').animate({
        left: '0'
        }, 500);
    } else {

        $('#sidebar').animate({
        left: '200'
        }, 500);
        $("#sidebar").addClass("animated") ;

    }
});

});

Upvotes: 0

Lauri Elias
Lauri Elias

Reputation: 1289

Ok, let's use variables.

$(document).ready(function() {
  var isLeft = false,
      sideBar = $('#sidebar');
  $('#toggle-sidebar').click(function() {
    if (isLeft) {
      sideBar.animate({
        left: '0'
      }, 500).promise().done(function() {
        isLeft = false;
      });
    } else {
      sideBar.animate({
        left: '200'
      }, 500).promise().done(function() {
        isLeft = true;
      });
    }
  });
});
#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 20em;
  height: 70vh;
  background: #333;
}
#toggle-sidebar {
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="sidebar"></div>

<a href="#" id="toggle-sidebar">Toggle</a>

Upvotes: 0

Leo Javier
Leo Javier

Reputation: 1403

Use Css animations instead... here an example: http://jsfiddle.net/leojavier/mag4eamz/

<div id="sidebar" class="primary-menu-show"></div>
<a href="#" id="toggle-sidebar">Toggle</a>

JS

$('#toggle-sidebar').click(function() {
   $('#sidebar').toggleClass('primary-menu-hide')
});

CSS

#sidebar {
  width: 20em;
  height: 70vh;
  background:#333;
}

#toggle-sidebar {
  float: none;
}


.primary-menu-show {
    -moz-animation: primary-menu-show 0.4s;
    -o-animation: primary-menu-show 0.4s;
    -webkit-animation: primary-menu-show 0.4s;
    animation: primary-menu-show 0.4s;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes primary-menu-show {
    from {
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }

    to {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-moz-keyframes primary-menu-show {
    from {
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }

    to {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes primary-menu-show {
    from {
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }

    to {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.primary-menu-hide {
    -moz-animation: primary-menu-hide 0.4s;
    -o-animation: primary-menu-hide 0.4s;
    -webkit-animation: primary-menu-hide 0.4s;
    animation: primary-menu-hide 0.4s;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes primary-menu-hide {
    from {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }
}

@-moz-keyframes primary-menu-hide {
    from {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }
}

@-webkit-keyframes primary-menu-hide {
    from {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }
}

Here is a functional sample: http://jsfiddle.net/leojavier/mag4eamz/

Upvotes: 0

Related Questions