jQuery visible targeting issue

Question

I've made this script that lets you navigate through multiple divs with jQuery, but I want to make a css change to the parent if the 6th div is shown and using .is(":visible") hasn't given me any luck.

$(document).ready(function() {
  /* Set the frame to #sf1 */
    $('#sf2, #sf3, #sf4, #sf5, #sf6').hide(); 
  /* Slide Animation for Next Slides */
    $('.nextbutton').click(function() { 
      $(this).parents('li').fadeOut(300);
      $(this).parents('li').next().fadeIn(300);
      if ($('#sf6').is(":visible") == "true") {
        alert('that just happened');
        $('#stepForm').css('height', 'auto !important');
      }
    }); 
  /* Slide Animation for Previous Slides */
    $('.prevbutton').click(function() { 
      $(this).parents('li').prev().fadeIn(300);
      $(this).parents('li').fadeOut(300);
    }); 
}); 

Answer 1

You should change

if ($('#sf6').is(":visible") == "true") {

to just

if ($('#sf6').is(":visible")) {

Answer 2

Why not test the css properties that would make it visible...

var dis = $('#sf6').css('display');
if (dis == 'visible' || dis == 'block'){
  // do something
}

Answer 3

You could capture it all in one selector by testing the length property like this:

if ( $('#sf6:visible').length ) {...

Should be a little quicker this way. Just thought I'd throw it out there. :o)