1

jQueryを使用してドキュメントをクリックするときに、そのdivのx位置を大きくして、divをアニメーション化しようとしています。

アニメーションを実行している間、divが視界から外れることは望ましくありません。divが画面から消えた場合は、元に戻したいと思います。

これは私のコードです：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
    overflow: hidden;
}
div {
    position: absolute;
    left:10px;
    top:10px;
    width:20px;
    height:20px;
    background-color:green;
}
</style>
<script type="text/javascript">
$(function(){
    $(document).click(function(){
        if($("div").offset().left > (parseInt($(window).width()))){
            $("div").animate({"top":'+=20'},1000);
            $("div").animate({"left": '8' },1000);
        }else{
            $("div").animate({"left":'+=400'},1000);
        }
    });
});
</script>
</head>
<body>
<div></div>
</body>
</html>

</ p>

4

1 に答える 1

4

http://jsfiddle.net/YV747/3/を参照してください 

$(function(){
    $(document).click(function(){
        $("#pointer").stop(0,0);

        if(($("#pointer").offset().left+100) > $(window).width()){
            $("#pointer").animate({"top":'+=20',"left":8},1000);
            //$("#pointer").animate({"left": '8' },1000);
        }else{
            $("#pointer").animate({"left":'+=400'},1000);
        }
    });
});

行を参照してくださいif(($("#pointer").offset().left+100) > $(window).width()){

私はそこに100を与えました。あなたは400またはあなたに合った任意の値を与えることができます。

注：コードを使用しないでください。div常に使用してください。idそうしないと、ドキュメント内のすべてのdivに作用します。

于 2012-07-19T10:48:22.897 に答える