For the circle border, just use a box-shadow
:
.circle-selected {
width: 70px;
height: 70px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #4679BD;
display: inline-block;
margin: 0 10px 10px 0;
box-shadow: 0 0 0 3px #000; /* Added this */
}
As for the transition, just add it to the circle
class:
.circle {
width: 50px;
height: 50px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #4679BD;
display: inline-block;
margin: 0 10px 20px 0;
transition: all 2s; /* Added these */
-webkit-transition: all 2s;
-moz-transition: all 2s;
}
And to remove the class from the element when the next circle is selected, you would use the following:
$(".next").live('click', function() {
$("#circle-container").find('.circle-selected').removeClass('circle-selected').next().addClass("circle-selected");
});
If you want to add the back
functionality, you would simply use .prev()
as opposed to .next()
:
$(".next").live('click', function() {
$("#circle-container").find('.circle-selected').removeClass('circle-selected').next().addClass("circle-selected");
});
$(".back").live('click', function() {
$("#circle-container").find('.circle-selected').removeClass('circle-selected').prev().addClass("circle-selected");
});