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

jQuery .animate（）背景图像条件语句

2 个答案: