HTMLボディが右にスライドしません

JQuery/Javascriptを書きました。バックグラウンドイメージを脇に押してメニューにスライドを作成したいと思います。メニュー自体はうまくスライドしますが、何らかの理由で私は体を動かすことができません。ここにはJavaScript、HTML、およびCSSがあります。HTMLボディが右にスライドしません

var main = function(){ 
 
$('.icon').click(function() 
 
{ 
 
$('.menu').animate({ 
 
left: "0px" 
 
}, 200); 
 

 
$('.body').animate({ 
 
left:"300px" 
 
}, 200); 
 
}); 
 
}; 
 

 
$(document).ready(main);

@charset "utf-8"; 
 
body { 
 
\t background-image: url(http://wallpapercave.com/wp/U7rb02o.jpg); 
 
\t background-size: cover; 
 
\t left: 0px; 
 
\t position: relative; 
 
\t margin: 0px; 
 
\t overflow: hidden; 
 
\t top: 0px; 
 
\t right: 0px; 
 
\t bottom: 0px; 
 
} 
 
.menu { 
 

 
\t background-image: url((https 
 
://image.freepik.com/free-vector/white-cubes-pattern_1053-248.jpg)) 
 
\t background: url("https://image.freepik.com/free-vector/white-cubes-pattern_1053-248.jpg"); 
 
\t background-repeat: repeat; 
 
\t background-position: left top; 
 
\t background-image: url(http://wallpapers.ae/wp-content/uploads/2014/10/Black-Pattern-Background-Wallpaper.jpg); 
 
\t height: 100%; 
 
\t width: 300px; 
 
\t position: fixed; 
 
\t left: -300px; 
 
\t cursor: pointer; 
 
} 
 
.icon { 
 
\t padding-top: 25px; 
 
\t padding-right: 0px; 
 
\t padding-left: 25px; 
 
\t padding-bottom: 25px; 
 
\t width: 75px; 
 
\t cursor: pointer; 
 
\t height: 40px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>JQuery Test</title> 
 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<link href="style.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 
<div class="body"> 
 
<div class="icon"> 
 

 
</div> 
 
</div> 
 
<div class="menu"> 
 
</div> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="app.js"></script> 
 
</body> 
 
</html>

出典

2016-08-28 Blip Blorp

私は 'にそれを変更する、しかし、期間を置いていないでミスをしました.body 'は体を滑らせていません。そうではありません：P –

CSSで 'body'を' .body'に変更するとうまくいきます。 – Titus

See、 '.body'は "body"クラスのdiv要素を選択します。 CSSでbodyを.bodyに変更すると、背景の画像は.body divのみをカバーするため、ほとんどのページは空白になります。 body要素を ".body"クラスではなく移動させたい –

このような何かあなたが始める必要があります。

$(document).ready(function(){ 
 
    $('.icon').click(function(){ 
 
    main(); 
 
    }); 
 
}); 
 

 
function main() { 
 
    $('.menu').animate({ 
 
    left: 0 
 
    }, 200); 
 

 
    $('.body').animate({ 
 
    left: "300px" 
 
    }, 200); 
 
}

@charset "utf-8"; 
 
body { 
 
\t background-image: url(http://wallpapercave.com/wp/U7rb02o.jpg); 
 
\t background-size: cover; 
 
\t left: 0px; 
 
\t position: relative; 
 
\t margin: 0px; 
 
\t overflow: hidden; 
 
\t top: 0px; 
 
\t right: 0px; 
 
\t bottom: 0px; 
 
} 
 
.menu { 
 

 
\t background-image: url((https 
 
://image.freepik.com/free-vector/white-cubes-pattern_1053-248.jpg)) 
 
\t background: url("https://image.freepik.com/free-vector/white-cubes-pattern_1053-248.jpg"); 
 
\t background-repeat: repeat; 
 
\t background-position: left top; 
 
\t background-image: url(http://wallpapers.ae/wp-content/uploads/2014/10/Black-Pattern-Background-Wallpaper.jpg); 
 
\t height: 100%; 
 
\t width: 300px; 
 
\t position: fixed; 
 
\t left: -300px; 
 
\t cursor: pointer; 
 
} 
 
.icon { 
 
\t padding-top: 25px; 
 
\t padding-right: 0px; 
 
\t padding-left: 25px; 
 
\t padding-bottom: 25px; 
 
\t width: 75px; 
 
\t cursor: pointer; 
 
\t height: 40px; 
 
    z-index:999; 
 
    position:absolute; 
 
    top:30px; 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="body"> 
 
    <div class="icon"></div> 
 
</div> 
 
<div class="menu"></div>

出典

2016-08-28 02:05:46 gibberish

コードを書く時間をとってくれてありがとうが、私は実際に同じことを達成するためにできる素早い変更を実現しました。背景画像をボディに適用するのではなく、終了していないメニューdivの後にdivを作成しました。したがって、

without a

です。私はこれに背景画像を適用し、divを100％の高さにしました。その後、それは魅力のように働いた:) –

私には許しているが、それは有効な解決策ではない - ここに理由がある。「

' without a '

」のようなものはありません。このようにコードを記述すると、ブラウザは自動的に終了タグ*を提供します（ブラウザは自動的にこれを自動的に行います - 基本的なエラーチェック）*それはそのように見えるかもしれませんが、あなたの問題を修正したものではありません。あなたの問題を解決するために私が何をしたのか（と私はその時間に余分な数秒を説明しなかったことを謝罪します）は、main（）関数の***からjQueryクリックイベントを移動することでした。それが解決したのです。 – gibberish

HTMLボディが右にスライドしません

答えて

関連する問題