My jQuery code allows me to fetch attributes from the .item element, but I'm having trouble with my CSS transitions not working as intended. To see the desired transition effect, try replacing .item with .item-tile.
How can I make my CSS transitions work harmoniously with my jQuery code?
$(".item-wrap").on("click", ".item", function() {
var itemColor = $(this)
.find(".icon")
.css("background-color");
$(".category-color").css("background-color", itemColor);
return false;
});.item-wrap {
display: flex;
}
.icon {
margin: 0px 5px 0px 5px;
position: relative;
height: 35px;
width: 35px;
border-radius: 50%;
}
.item-wrap .item {
position: relative;
}
.item-wrap .item .radio-button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
z-index: 999;
cursor: pointer;
}
.item-wrap .item .item-tile {
-webkit-transition: -webkit-transform 300ms ease;
transition: -webkit-transform 300ms ease;
-o-transition: transform 300ms ease;
transition: transform 300ms ease;
transition: transform 300ms ease, -webkit-transform 300ms ease;
}
.item-wrap .item .radio-button:checked+.item-tile {
border: 2px solid #079ad9;
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.category-color {
height: 50px;
width: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item-wrap">
<div class="item">
<input id="clothing" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:blue;">
</div>
</div>
</div>
<div class="item">
<input id="elephant" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:red;">
</div>
</div>
<div class="item">
<input id="fish" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:green;">
</div>
</div>
</div>
</div>
</div>
<div class="copy-container">
<div class="category-color">
</div>
</div>