CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jiroscopes
Jiroscopes

Reputation: 555

Make a Div move left before it expands

I have this div that I want to move left, like smoothly with an animation, then I want it to expand to a size with an animation. The way I am currently trying to attempt this is using the classes and switching between them with a click, the transition property on them allows for it to animate.

Basically I am struggling with having the element move, Then expand, it wants to either do them at the same time, or expand then when re-clicked it moves.

I want to Click > move > then expand > then re-click to undo it all. Preferably all in JQuery

HTML:

<div class="box" id="box2">
  <h1 class="headline">BOX</h1>
</div>

CSS:

.box_clicked {
    height: 500px;
    width: 500px;
    background-color: rgba(0, 0 , 0, 0.8);
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
   -o-transition: all 1s;
}
.box {
    height: 200px;
    width: 300px;
    background-color: rgba(0, 0 , 0, 0.8);
    position: relative;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
}

.move-left {
    right: -100px;
    background-color:red;
}

here is my jsfiddle

Thanks!

Upvotes: 1

Views: 856

Answers (5)

Shoaib Konnur
Shoaib Konnur

Reputation: 459

There no need to write to much of JS code only we have to do some tricks with CSS3. Always remember that while using transition on any properties you should have to define initial and final value. Fiddle for this is https://jsfiddle.net/dps6dwdv/1/

Here is the updated code.

HTML

<div class="box" id="box2">
  <h1 class="headline">BOX</h1>
</div>

CSS

.box {
    height: 200px;
    width: 300px;
    background-color: rgba(0, 0 , 0, 0.8);
    position: relative;
  left: 0px;
    transition: left 1s,width 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;

}
.box.active{
  left : 20px;
  width : 500px;
}

JS 

$('#box2').click(function(){
    $('#box2').toggleClass("active");

});

Upvotes: 1

Arun CM
Arun CM

Reputation: 3435

Are you expecting something like this ? Using JQuery

var bind = true



$('#box2').click(function() {

  $('#box2').css({
    'right': '0px',
    'left': '0px'
  }).animate({
    'right': '150px'
  }, function(){ $(this).addClass("box_clicked").css({'height':'100px'})});

  
});

$('#box2').click(function() {
  if (bind) {

    $('#box2').css({
      'right': '0px',
      'left': '0px'
    }).animate({
      'left': '150px'
    },0, function(){  $(this).addClass("move-left").css({'height':'200px'})});
  }
  bind = !bind;
});
.box_clicked {
height: 100px;
width: 200px;
background-color: rgba(0, 0 , 0, 0.8);
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
.box {
height: 100px;
width: 200px;
background-color: rgba(0, 0 , 0, 0.8);
position: relative;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;

}

.move-left {
right: -100px;
background-color:red;

 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" id="box2">
  <h1 class="headline">BOX</h1>
</div>

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Something like this

var bind = true
$('#box2').click(function() {
  $('#box2').toggleClass("box box_clicked");
});

$('#box2').click(function() {
  if (bind) {
    $('#box2').addClass("move-left");
  }
  else $('#box2').removeClass("move-left");
  bind = !bind;
});
.box_clicked {
  height: 500px;
  width: 500px;
  background-color: rgba(0, 0, 0, 0.8);
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
}
.box {
  height: 200px;
  width: 300px;
  background-color: rgba(0, 0, 0, 0.8);
  position: relative;
  left: 0px;
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
}
.move-left {
  position: relative;
  left: 100px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" id="box2">
  <h1 class="headline">BOX</h1>
</div>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

You can do it all in CSS with a single animation

document.getElementById('button').addEventListener('click',function() {
  document.getElementById('box2').classList.toggle('animate');
})
.box {
  background-color: rgba(0, 0, 0, 0.8);
  position: relative;
  height: 200px;
  width: 300px;
}

input {
  display: none;
}

label {
  cursor: pointer;
  text-decoration: underline;
  color: #09c;
}

:checked ~ #box2, .animate {
  animation: foo 5s forwards;
}

@keyframes foo {
  50% {
    transform: translateX(100px);
    height: 200px;
    width: 300px;
  }
  100% {
    height: 500px;
    width: 500px;
  }
}
<input type="checkbox" id="checkbox"><label for="checkbox">checkbox</label> <button id="button">javascript</button>
<div class="box" id="box2">
  <h1 class="headline">BOX</h1>
</div>

Upvotes: 1

elvey
elvey

Reputation: 518

You can achieve this using keyframe animations.

var box = document.getElementById('box2');
box.addEventListener('click', function() {
  box.classList.toggle('box_clicked');
});
@keyframes boxActivated {
  50% {
    transform: translateX(100px);
  }
  100% {
    height: 500px;
    width: 500px;
    transform: translateX(100px);
  }
}

.box {
  height: 200px;
  width: 300px;
  right: 0;
  background-color: rgba(0, 0 , 0, 0.8);
  position: relative;
}

.box_clicked {
  animation-name: boxActivated;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}
<div class="box" id="box2">
    <h1 class="headline">BOX</h1>
  </div>

Upvotes: 0

Related Questions