javascript - Angular animation: Slider Effect


Keywords:javascript 


Question: 

Have a look at the code here: Simple Angular animation example I want to generate a similar effect in in my webpage using Angular animation. The only difference is, in the above example, the code is generating slider effect when fetching different html files. My project has a slight modification to that. Instead, i want to display two different div of the same html file. On clicking button one I want to display a div. lets call it div1 for now. On clicking button 2 I want to display div2 and remove display of div1 by showing sliding animation. How do I do that? The index.html code is here:

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>AngularJS Swipe Slider animation</title>
  <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no">
  <link href="" rel="stylesheet" />
  <link href="" rel="stylesheet" />
</head>

<body>
  <div ng-controller="tabsSwipeCtrl as responsive">
    <div class="btn-group btn-group-justified">
      <div class="btn-group">
        <button type="button" class="btn btn-default" ng-click="responsive.selectPage(0)" ng-class="{'active': responsive.ngIncludeSelected.index == 0}">First</button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default" ng-click="responsive.selectPage(1)" ng-class="{'active': responsive.ngIncludeSelected.index == 1}">Second</button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default" ng-click="responsive.selectPage(2)" ng-class="{'active': responsive.ngIncludeSelected.index == 2}">Third</button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default" ng-click="responsive.selectPage(3)" ng-class="{'active': responsive.ngIncludeSelected.index == 3}">Fourth</button>
      </div>
    </div>
    <div class="ngIncludeRelative">
      <div class="ngIncludeItem" ng-include="responsive.ngIncludeSelected.url" ng-class="{'moveToLeft' : responsive.moveToLeft}"></div>
    </div>
  </div>
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
<script src=""></script>
</body>

</html>

1 Answer: 

Within div u can simply do by using jquery animate function

$(".btn-default").click(function(){
$("div2").animate({
    left: '250px'
});
});