CODEWITHSUNDEEP
javascriptjquery
Winthan Aung
Winthan Aung

Reputation: 351

How to use jquery with variable assigned

How can I use a variable in jQuery. as you see in script snippet, I assign a variable "divname" with value, and when i use 'Jquery" to fade out. it is not working. What I really need is, when image is hover, the description will be show up as fading in, when mouse is gone, the the description should be gone. thanks in advance.

Script snippet

    $j('.img_nofade').hover(function(){  
    $j(this).animate({opacity: .5}, 300);
          var i = $j(this).attr('titlename');
          var divname = "'#titleID" + i + "'";
          //alert (divname);
          $j(divname).fadeIn();
    }, 
    function(){  
       $j(this).animate({opacity: 1}, 300);
          $j(divname).fadeOut();
       }  
    );

HTML code

     <img class="img_nofade' src="image-1.gif" titleid='1" /> 
     <div id="titleID1">my image title 1 </div>


     <img class="img_nofade' src="image-2.gif" titleid='2" /> 
     <div id="titleID2">my image title 2 </div>

      <img class="img_nofade' src="image-3.gif" titleid='3" /> 
     <div id="titleID3">my image title 3 </div>

Upvotes: 1

Views: 199

Answers (5)

CaffGeek
CaffGeek

Reputation: 22064

This isn't too hard

$j('.img_nofade').hover(function(){
  var title = 'titleID' + $(this).attr('titleid');
  $('#' + title).fadeIn();
}, function(){
  var title = 'titleID' + $(this).attr('titleid');
  $('#' + title).fadeOut();
});

Try this fiddle http://jsfiddle.net/cmyks/

Upvotes: 0

Jemaclus
Jemaclus

Reputation: 2376

There are a few issues here.

1) You have some typos in the HTML. Be careful about single and double quotes. Not all browsers will automatically correct those kinds of errors, and if Javascript can't find the HTML it's looking for, then your code will break.

2) jQuery provides some excellent resources for getting elements without having to fall back on the varname-style thing (i.e. var titleId = $(this).attr('titleId')+i;)

Instead, you can do something like this:

 <img class="img_nofade" src="image-1.gif"/>
 <div class="description">my image title 1 </div>

 <img class="img_nofade" src="image-2.gif"/>
 <div class="description">my image title 2 </div>

 <img class="img_nofade" src="image-3.gif"/>
 <div class="description">my image title 3 </div>

I got rid of the titleId attribute and changed the divs from id="TitleID1" to "description". It's more generic, but it's also more semantic from a styling standpoint. You won't have to individually style each of those things.

The jQuery would look something like:

    $('.img_nofade').hover(function(){
        $(this).animate({opacity: .5}, 300);
        $(this).next('.description').animate({opacity: 0}, 300);
    },function(){  
      $(this).animate({opacity: 1}, 300);
      $(this).next('.description').animate({opacity: 1}, 300);
    });

The $.next() method grabs the next element. If you pass in a selector, you can grab the next element with that selector. This is really useful when you're dynamically adding things to the page and want to grab the next one on the list. There are several other ways to do this, this just happens to be the easiest in this scenario, I think.

Finally, you should keep in mind that the .fadeIn() and .fadeOut() methods will change the display attribute to display:none when hiding. This means that in your above example, without any styling, the titles would disappear, causing the images to slide together. That's why I chose to animate on the opacity instead. You can definitely do the fadeIn/fadeOut thing if you have CSS styling those images to keep them from collapsing in on each other.

Good luck.

Upvotes: 1

Chris
Chris

Reputation: 4471

There are a few issues I see.

  1. Your attributes in your HTML are mixing single and double quotes. You need to use one or the other.
  2. $j(this).attr('titlename'); - The attribute name doesn't match your HTML attributes. (titlename vs titleid)
  3. You have a scoping issue with the var divname. You define it in your mouseover event which means it won't be defined in your mouseleave event. You should just use the next method to get a reference to your div. $j(this).next().fadeIn() This would prevent the need for trying to find the titleID in the first place.

Upvotes: 1

craigb
craigb

Reputation: 16907

You have two functions for the hover and have declared divname in the first and then you are trying to use it in the second. This won't work because it is not in scope of the second function.

Instead of using the divname in this case you could use $j(this).next() to select the next sibling, in this case the div following the img and call fadeIn() and fadeOut() that way.

$j('.img_nofade').hover(function(){
  $(this).next().fadeIn();
}, function(){
  $(this).next().fadeOut();
});

Upvotes: 0

Oleg Grishko
Oleg Grishko

Reputation: 4281

No need to use the ' char, just:

var divname = "#titleID" + i;

And in the hover's handlerOut function, the divname is already out of scope, you should define it again.

Upvotes: 1

Related Questions