CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Prajwal Bati
Prajwal Bati

Reputation: 195

Transition in div

I have three different boxes in same row. I want transition in those boxes when clicked inside the box. enter image description here Right now when i click on any box it will expand from left to right and get full width and other boxes are stacked in next row. What i want is when i click red box the that box must expand from left to right overlapping the remaining boxes. Similarly when i click the green box, it must expand from both its side and overlap both boxes in left and right side and get full width. Similarly when i click blue box it must expand from left side and fill the width overlapping the remaining boxes. Can any one please help me?

My Code is : 

<html>
<head>
    <title>Transition</title>
    <style type="text/css">
    .box {
        width:30%;
        height: 200px;
        margin: 10px;
        float:left;
    }
    #first {
        background-color: red;
    }
    #second {
        background-color: green;
    }
    #third {
        background-color: blue;
    }
    </style>
</head>
<body>
    <div class="container">
        <div id="first" class="box"></div>
        <div id="second" class="box"></div>
        <div id="third" class="box"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var containerWidth = $(".container").width();
            $(".box").click(function() {
                var id = $(this).attr("id");
                $("#"+id).animate({width: "100%"});
            });
        });
    </script>
</body>
</html>

Jsfiddle link

Upvotes: 0

Views: 57

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

Transition transform: scale(), and that will allow the element to expand over the others. You can just assign a class via js for that property to transition and you can do that in pure CSS. And since each element is 20% wide, transitioning scaleX(5) would be 100%. And use transform-origin to change which direction the elements expand from.

var containerWidth = $(".container").width();
$(".box").click(function() {
  var id = $(this).attr("id");
  $(this).addClass('scale');
});
.box {
  width:20%;
  height: 200px;
  margin: 10px;
  float:left;
  transition: transform .5s;
  transform-origin: 0 0;
}
#first {
  background-color: red;
}
#second {
  background-color: green;
  transform-origin: center center;
}
#third {
  background-color: blue;
  transform-origin: 100% 0;
}

.scale {
  transform: scaleX(5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
		<div id="first" class="box"></div>
		<div id="second" class="box"></div>
		<div id="third" class="box"></div>
</div>

Though this effect would work a lot better if the elements were evenly spaced within the parent, then they will overlap and fill the parent evenly. Using display: flex; justify-content: space-between; on the parent enables that.

var containerWidth = $(".container").width();
$(".box").click(function() {
  var id = $(this).attr("id");
  $(this).addClass('scale');
});
.container {
  display: flex;
  justify-content: space-between;
}

.box {
  width:20%;
  height: 200px;
  transition: transform .5s;
  transform-origin: 0 0;
}
#first {
  background-color: red;
}
#second {
  background-color: green;
  transform-origin: center center;
}
#third {
  background-color: blue;
  transform-origin: 100% 0;
}

.scale {
  transform: scaleX(5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
		<div id="first" class="box"></div>
		<div id="second" class="box"></div>
		<div id="third" class="box"></div>
</div>

Upvotes: 1

Related Questions