Question

我有这个非常简单的Jquery脚本，我试图制作一个移动的横幅。问题是当它按照小提琴中显示的那样移动时：

但是一旦我把它放在实际的页面中，在页面加载时内部内容就会消失了＃34;在包装div的左上角。

这是我的实际页面代码：

＆＃13;

$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
    });
});

＆＃13;

body {
    overflow-x: hidden;
}
#slideout {
    background: #666;
    position: absolute;
    width: 280px;
    height: 80px;
    top: 45%;
    right:-280px;
    padding-left: 300px
}
    
#clickme {
    position: absolute;
    top: 0; left: 0;
    height: 60px;
    width: 60px;
    background: #000000;
}

#slidecontent {
    float:right;
}
#content {
    background: #000000;
    width: 200px;
    height: 80px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="slideout">
    <div id="slidecontent">
        <div id="content">
            hi
        </div>
    </div>
    
    <div id="clickme">
    </div>
</div>

＆＃13;

 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
    });
});

</script>



<style>
body {
    overflow-x: hidden;
}
#slideout {
    background: #666;
    position: absolute;
    width: 280px;
    height: 80px;
    top: 45%;
    right:-280px;
    padding-left: 300px
}

#clickme {
    position: absolute;
    top: 0; left: 0;
    height: 60px;
    width: 60px;
    background: #000000;
}

#slidecontent {
    float:right;
}
#content {
    background: #000000;
    width: 200px;
    height: 80px;
}
</style>


</head>

<body>


<div id="slideout">
    <div id="slidecontent">
        <div id="content">
            hi
        </div>
    </div>

    <div id="clickme">
    </div>
</div>




</body>
</html>

移动div，使用Jquery产生奇怪的结果

0 个答案: