0

过去几天我一直在研究一个 javascript 滑块，到目前为止，我一直坚持如何让 div 滑入页面并使用关闭按钮滑出页面......我找到了一些我拥有的代码试图让它工作，但这样做却非常不受欢迎。这是我在我试图用来将 div 滑出屏幕的 2 部分代码旁边添加注释的完整代码。

<script type="text/javascript">
$(function(){
    $(".recordrow").click(function() {
    var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
    $("#"+divid).show().animate({ "left": '50.1%'}); //Bring the div from right to left with 200px padding from the screen

});

});
function closeRecord() { // this function
 $('#details').animate({right:-1000}, 500);
}
</script>



<div class="recordrow" id="row-1">
    <p>Matthew Gia </p>
    </div>

<div class="details" id="details-1">
   ... More details of the records
   <a href="#" id="bt-close" onclick="closeRecord(); return false;">Close</a> //this button

</div>
<div class="details" id="details-2">
   ... More details of the records

</div>

还有这个js小提琴

http://jsfiddle.net/matth4ck3r/aWMg6/2/

4

2 回答 2

1

您的代码中存在范围问题，您可以删除该onclick属性并尝试：

$('#bt-close').click(function(e){
    $('.details').animate({right: "-=1000"}, 500);
    e.preventDefault()
})

http://jsfiddle.net/aWMg6/10/

另请注意，您的标记中没有 id 的元素，details您似乎想按类名选择元素。

于 2012-09-07T01:46:35.340 回答
0

你也可以做这样的事情，虽然它不像未定义的答案那么干净。 http://jsfiddle.net/aWMg6/12/

于 2012-09-07T01:59:09.200 回答