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.


$('.try').hover(function() {
    $(this.id + '-slide').css('right','0px');

.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;

<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>

Try this:

  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');

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!