CODEWITHSUNDEEP
jqueryhtmlcsscross-browserjquery-animate
Jamie Kudla
Jamie Kudla

Reputation: 872

.animate() height is showing hidden elements in firefox

Referring to: http://api.jquery.com/animate/

Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.

fiddle: http://jsfiddle.net/86q9w/2/

if (!$('textarea').hasClass('nbrdr')) {
    $('.lbxa textarea').animate({
        height: "100px"
    }, 500);
}

working correctly (which it does in most browsers), it should animate while only showing the textarea that corresponds to the clicked span ONLY on the first click of any span. For some reason in Firefox (all versions from what I can tell) this animation is making all of the textareas visible after being set to display: none via css.

Upvotes: 0

Views: 113

Answers (1)

VIDesignz
VIDesignz

Reputation: 4783

Check this fiddle

Example

var currentIndex;
$('span.spec').click(function() {
   var which = $(this).index();
   if(currentIndex != which){
   $('textarea').slideUp(100).eq(which).slideDown(100);
   }
   currentIndex = which;
});

Upvotes: 2

Related Questions