jQuery Ticket #11357

Clicking "View Project Images" and "Hide Project Images" should alternately show/hide divs with background images. The images disappear intermittently, but they always reapper if you open the <div> in Chrome Developer Tools and uncheck/check the element.style { background-image}

HTML

<div id="wrapper" class="project">
            
                        <section style="background-color: #000000;" id="masthead">
                <h2 style="background-image: url('http://www.bigspaceship.com/wordpress/wp-content/uploads/2011/11/starwars_pm1.jpg')">Star Wars</h2>
                    
                                

            
            <div class="slideshow"> 
                <div class="carousel">
                    <ul>
                        
            <li class="centerImage" style = "opacity:.2" ><div class = "image-panel" style="background-image:url('http://farm8.staticflickr.com/7001/6467445419_794c2ddb56_b.jpg');"></div></li>
            
                                </ul>
                </div>
            </div>

                    </section>
                    
                    <section id="tagline">    
                        <div class = "container" >
                            <div id="subnav-content">
                                    <div id="show-images" style="color:black;">View Project Images</div>
                                    <div id="hide-images">
                                        <a class = "prev">Previous Image</a>
                                        <a class = "hide" style="color:black;">Hide Project Images</a>
                                        <a class = "next"> Next Image</a>
                                    </div>
                            </div>
                        </div>
                                </section>
</div>

CSS

div#wrapper.project section#masthead {
  height: 450px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
div#wrapper.project section#masthead h2 {
  width: 1024px;
  margin: 0 auto;
  height: 450px;
  background: transparent center bottom no-repeat scroll;
  text-indent: -999em;
}
div#wrapper.project section#masthead div#project-images {
  /* display when Show Project Images is clicked */

  display: none;
}
div#wrapper.project section#masthead .arrow {
  height: 130px;
  left: 50%;
  position: absolute;
  top: 390px;
  width: 25px;
  z-index: 9999;
  display: none;
}
div#wrapper.project section#masthead .arrow a {
  height: 75px;
  width: 25px;
  opacity: 0.8;
}
div#wrapper.project section#masthead .arrow a:hover {
  height: 75px;
  width: 25px;
  opacity: .7;
}
div#wrapper.project section#masthead .images-btn {
  position: absolute;
  top: 404px;
  z-index: 999;
  display: none;
  width: 36px;
  background: #232d35 url('../img/arrows/arrows-slideshow-sprite.png');
  background-position: 0 center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
div#wrapper.project section#masthead .images-btn.left {
  background-position: 0 center;
  left: 50%;
  margin-left: -512px;
}
div#wrapper.project section#masthead .images-btn.left:hover {
  background-position: -36px center;
  cursor: pointer;
}
div#wrapper.project section#masthead .images-btn.right {
  background-position: -108px center;
  right: 50%;
  margin-right: -512px;
}
div#wrapper.project section#masthead .images-btn.right:hover {
  background-position: -72px center;
  cursor: pointer;
}
div#wrapper.project section#masthead .images-btn a {
  display: block;
  height: 80px;
}
div#wrapper.project section#masthead .slideshow {
  left: 50%;
  margin: 0 auto 0 -1536px;
  overflow: hidden;
  position: relative;
  width: 500%;
  display: block;
}
div#wrapper.project section#masthead .slideshow .carousel {
  padding-left: 1024px;
}
div#wrapper.project section#masthead .slideshow .carousel ul li...

JavaScript

$(document).ready(function() {
    var slideshowHeight = $('.slideshow').height();
    var mastheadHeight = $('#masthead h2').height();
    var slideshowOpenSpeed = 400;

    //console.log ('slideshowHeight is '+slideshowHeight+', mastheadHeight is '+mastheadHeight);
    $("#show-images").click(function() {
        $('#masthead .slideshow').stop(true, true, true);
        $('div#show-images').stop(true, true, true);
        $('#masthead h2').stop(true, true, true);
        $('div#hide-images').stop(true, true, true);
        $('#masthead').stop(true, true, true);
        $('div.images-btn').stop(true, true, true);


/*even though .slideshow is concealed when page first loads, 
        can't be display:none or else the carousel won't build properly.
        now we hide it so we can fadeIn later... */
        $('#masthead .slideshow').hide();
        $('div#show-images').fadeOut(800);
        $('#masthead h2').fadeOut(800, function() {

            $('html, body').animate({
                scrollTop: 0
            }, slideshowOpenSpeed);

            $('#masthead').animate({
                height: slideshowHeight + 'px'
            }, slideshowOpenSpeed, function() {
                $('div.slideshow').addClass('open');
            });
            $('div.images-btn').fadeIn(800);
            $('div#hide-images').fadeIn(800);
            $('#masthead .slideshow').fadeIn(800);
            //$('section#main h3').css('box-shadow','0 -4px 0 0 rgba(0,0,0,0.1)');
            bannerColor = $('#masthead').css("background-color");

            $('#masthead').animate({
                backgroundColor: "#000000"
            }, 500);

        });
    });

    $("#hide-images a.hide").click(function() {
        $('#masthead .slideshow').stop(true, true, true);
        $('div#show-images').stop(true, true, true);
        $('#masthead h2').stop(true, true, true);
        $('div#hide-images').stop(true, true, true);
        $('#masthead').stop(true, true, true);
       ...