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 に答える