jQuery .animate() background image conditional statement

Question

Ich versuche, einen Curtain-Effekt zu erzeugen, wenn die Funktion ausgeführt wird, während der Vorhang unten ist, geht es nach oben und umgekehrt. Heres was ich bisher habe.

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

Es geschieht nichts, und ich nicht alle Fehler in der Konsole erhalten. Irgendwelche Ideen, warum das nicht funktioniert?

Answer 1

Ich habe ein paar Änderungen vorgenommen, aber ich bin mir nicht sicher, ob dies Browser-sicher sein wird.

Aktualisieren Sie Ihre HTML-Struktur mit einer closed Klasse am Anfang.

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

Und sie JavaScript aktualisieren.

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

Ihr Zustand war falsch an erster Stelle und nie auslösend. Außerdem ändere ich die Animationsoptionen, um es weniger überladen zu machen.

Answer 2

Heres was für mich arbeiten für jemanden mit der gleichen Frage.

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