Question

Im trying to make a curtain effect where when the function is executed while the curtain is down it will go up and vice versa. Heres what i have so far.

HTML

<div id="curtain"></div>

CSS

#curtain {
    width: 791px;
    height: 449px;
    background: url(/assets/curtain.png) no-repeat;
    position: absolute;
    top: 111px;
    left: 265px;
    z-index: 2;
    overflow: hidden;
}

jQuery

function curtain() {
    if ($('#curtain').css('backgroundPosition') === '0 0') { 
        $(this).stop().animate(
        {backgroundPosition:"(0 -250px)"}, 
        {duration:500})
    } else {
        $('#curtain').stop().animate(
        {backgroundPosition:"(0 0)"}, 
        {duration:500})
    }
}

$("#wall-right").click(function() {
    $("#frame").attr('src', 'http://player.vimeo.com/video/27748543');
    curtain();
});

Nothing happens and I dont get any errors in console. Any ideas why this is not working?

Answer 1

I did a couple of changes but still I am not sure this is gonna be browser-proof.

Update your HTML structure using a closed class at the beginning.

<div id="curtain" class="closed"></div>

​
And update your JavaScript.

var $curtain = $("#curtain");
var curtain = function() {
  var isClosed = $curtain.hasClass('closed');
  if (isClosed) {
    $curtain.removeClass("closed").stop().animate({
      "background-position-y" : "-250px"}
    , 2000);
  } else {
    $curtain.addClass("closed").stop().animate({
      "background-position-y" : "0px"}
    , 2000);
  }
};

Your condition was wrong in first place and never triggering. Also I change the animation options to make it less cluttered.