Question

我过去几天一直在研究一个javascript滑块，直到这一刻我一直坚持如何将幻灯片滑入页面幻灯片从页面滑回关闭按钮......我找到了一些代码我试图让它工作，但这样做极其不准确..这里是完整的代码我已经在我试图用于将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>

还有这个小提琴

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

Answer 1

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

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

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

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

Answer 2

你也可以这样做，但它并不像undefined的答案一样干净。 http://jsfiddle.net/aWMg6/12/

隐藏javascript滑块的问题

2 个答案: