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クラスを使用してHTML構造を更新します。

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