Question

我似乎无法弄清楚如何使用切换按钮为我的div滑动动画。

我尝试使用变量，但我有多个变量，而且我创建了太多变量来跟踪每个变量的点击次数。

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

Answer 1

请注意，此方法使用CSS过渡，IE9及更早版本不支持。如果这是你的问题，继续使用jQuery来动画你的div，并通过切换它们来保存它们的状态。

如果要移动多个div，请使用类而不是ID。并在其上切换课程：

$('.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>

Answer 2

使用Css动画代替......这里有一个示例：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);
    }
}

以下是一个功能样本：http://jsfiddle.net/leojavier/mag4eamz/

Answer 3

好的，让我们使用变量。

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

Answer 4

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

    }
});

});

使用切换按钮为div滑动动画

4 个答案: