CODEWITHSUNDEEP
jqueryif-statement
loriensleafs
loriensleafs

Reputation: 2255

animating to certain height based on if a div has a certain class

I have a div that I'd like to animate to 3 different heights depending on the click element. I had wanted to do it with classes, so if one of the clicked elements, a div named d_foxboro is clicked and it has a class of height_one the location_slider is aniamted to the first height, if another div is clicked, d_main and it has a class of height_two then location_slider is animated to teh second height, and so on.

$( "#d_Foxboro" ).click(function(){
$( "#location_slider" ).animate({
"height": 500
}, 450 );
});

Upvotes: 0

Views: 95

Answers (3)

Halaster
Halaster

Reputation: 1502

$( "#d_Foxboro" ).click(function(){
    var height = 0;
    if($(this).hasClass('class1')){ 
       height = 400; 
   } else if($(this).hasClass('class2')){ 
       height = 500; 
   } else if($(this).hasClass('class3')){ 
       height = 600; 
   }

   $( "#location_slider" ).animate({
       "height": height
   }, 450 );

});

Basically, use hasClass to see which class your element has, then set the variable which contains your height depending on the class

Upvotes: 2

jsweazy
jsweazy

Reputation: 1621

When clicked check the class then set a height variable based of that

$( "#d_Foxboro" ).click(function(){
  // Default height
  var h = 0; // Set to a default number
  // Class of clicked item
  var h_class = $(this).attr('class');

  // Check class and set height based of which class
  if(h_class == "something") {
    h = 500;
  } else if(h_class == "something else") {
    h = 400
  }

  $( "#location_slider" ).animate({
    "height": h
  }, 450 );

});

Upvotes: 0

JoeFletch
JoeFletch

Reputation: 3970

I personally like to use the .on() method for binding events because it allows me to easily change it if the element is dynamically added to the DOM.

$( "#d_Foxboro" ).on("click", function(){
    var height = 0;
    if ($(this).hasClass() == "someClass"){
        height = 100;
    }
    else
    {
        height = 200;           
     }
    $( "#location_slider" ).animate({
         "height": height
       }, 450 );
});

Upvotes: 0

Related Questions