Question

我需要用一个按钮触发两个滑入式div。我玩过http://jsfiddle.net/hoptubtowers1/VmSX4/133/我想要的结果就像一对简单的窗帘。在第一次点击时，“红色”窗帘向左滑出，“绿色”窗帘向右滑出。在第二次点击时，“窗帘”将关闭。

Answer 1

这样的事情：

var $curtains = $('#red,#green')
$('button').toggle(function(){
  $curtains.animate({
    width:0
  })
},function(){
  $curtains.animate({
    width:'50%'
  })
})

CSS：

#container {
  position:relative;
  width: 400px;
  height: 600px;
}
#red {
  width:50%;
  position:absolute;
  left:0;
  background:red;
}
#green {
  width:50%;
  position:absolute;
  right:0;
  background:green;
}

HTML：

<button>Click me</button>
<div id="container">
  <div id="red"></div>
  <div id="green"></div>
</div>

Answer 2

刚检查过......这个脚本应该可以解决问题。

function toggleDivs() {
    var $red = $("#red");
    var $green =$("#green");
       if ($green.position().left*1 == 200) {
            $red.animate({  left: "-400px"  });
            $green.animate({left: "400px"  });
    }
    else {
            $red.animate({  left: "-200px"  });
            $green.animate({left: "200px"  });
    }

}


$("button").bind("click", function() {
    toggleDivs();
});

两个幻灯片从一个按钮发射div。

2 个答案: