July 5, 2013
Get id + additional string through jQuery to activate CSS3 transition
LimitBreaker15’s Question:
What am I doing wrong here?
I’m trying to get the id of the hovered div through the class, then add the string ‘-slide’ to activate the supposedly sliding transition for each .content.
<html>
<head>
<script>
$('.try').hover(function() {
$(this.id + '-slide').css('right','0px');
});
</script>
<style>
.try {
width: 50px;
height: 50px;
border: 1px black solid;
margin-bottom: 5px;
}
.content {
width: 100px;
height: 100%;
background-color: grey;
position: fixed;
top: 0;
right: -50px;
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="one" class="try"></div>
<div id="two" class="try"></div>
<div id="three" class="try"></div>
<div id="one-slide" class="content"></div>
<div id="two-slide" class="content"></div>
<div id="three-slide" class="content"></div>
</body>
</html>
Try this:
$(".try").hover(
function () {
$('#' + this.id + '-slide').css('right','0px');
},
function () {
$('#' + this.id + '-slide').css('right','-50px');
}
);
To select a particular element in jQuery you need # for id and . for classes just like css.
You probably need this
$("#" + this.id + '-slide').css('right','0px');
