jQuery .animate()背景图像条件语句

Question

我正在尝试制作一个窗帘效果，当函数在窗帘落下时执行时，它将上升，反之亦然。这就是我到目前为止所拥有的。

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();
});

什么都没有发生，并且我在控制台中没有得到任何错误。你知道为什么这不起作用吗？

Answer 1

我做了一些修改，但我仍然不确定这是不是浏览器安全的。

在开始时使用closed类更新您的超文本标记语言结构。

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

​并更新您的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);
  }
};

你的情况一开始就是错的，而且从来没有触发过。此外，我还更改了动画选项，使其不那么杂乱。

Answer 2

对于任何有同样问题的人来说，这就是最终对我有效的方法。

var $curtain = $("#curtain");   
var $frame = $("#frame");
var $url = '';

function curtainOpen() {
    $frame.attr('src', $url);
    $frame.load(function(){
        $curtain.removeClass("closed").addClass("open").stop().animate({
            "background-position" : "0 -370px"}, 2000);
    });
};

function curtainClose() {
    $curtain.removeClass("open").addClass("close").stop().animate({
        "background-position" : "0 0"}, 2000, function(){
            curtainOpen();
        });

};

function curtain() {
    var isClosed = $curtain.hasClass('closed');
    var isOpen = $curtain.hasClass('open');         
    if (isClosed) { 
        curtainOpen();
    } else if (isOpen) {
        curtainClose();
    }
};

$("#wall-left").click(function() {
        $url = "http://player.vimeo.com/video/27748544";
        curtain();
});

$("#wall-right").click(function() {
        $url = "http://player.vimeo.com/video/27748543";
        curtain();
});