2017-12-02 7 views
0

私はかなりjavascriptとjavascript animateプロパティの新機能です。一般的に私を助けてください。画像全体の幅を50%〜100%にしたいと思います。私はそれを上に置くと100%に変更したい。Jquery Animation not working width%

複数の単語はstackoverflowのが望んでいる原因より

HTML:

<html lang="en"> 
<head> 
<script type="text/javascript" src ="js/a.js"></script> 
<link rel="stylesheet" href="css/a.css" type="text/css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 
<body> 
<div class="content"> 
    <div class="col-1" id="collum1"> 
     <div class="col-1c" id="collum1c"> 
      <img src="images/ngnl.jpg" onmouseover="colmover1()"> 
     </div> 
    </div> 
</div> 
</body> 
</html> 

CSS:

.content{ 
background:rgba(0,0,0,0.5); 
z-index:0; 
position:relative; 
} 
.col-1{ 
position:relative; 
float:left; 
width:50%; 
height:100%; 
background-image:url('../images/ngnlfull.jpg'); 
background-repeat:no-repeat; 
background-size: cover; 
} 
.col-1c{ 
background-color: rgba(0, 0, 0, 0.7); 
float:left; 
width: 100%; 
height: 100%; 
} 
.col-1c img{ 
display:block; 
margin:auto; 
max-width:100%; 
height:50%; 
border-radius:50%; 
margin-top:25%; 
} 
body{ 
margin: 0px; 
padding: 0px; 
outline: none; 
border: 0px; 
background-image: url('../images/bg.jpg'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
} 

Javascriptを:

function colmover1(){ 
var collum1 = document.getElementById("collum1"); 
var collum1c = document.getElementById("collum1c"); 
var collum2 = document.getElementById("collum2"); 
var collum2c = document.getElementById("collum2c"); 

collum1.animate({width:'100%'}); 
} 
+0

colmover1はネバーが付けられている。アニメーションには、fromとtoとdurationが少なくとも必要です。ドキュメントを読んでください。複数のコンテナを使用する場合は、幅と高さを伝播するようにしてください。 –

答えて

0

// used css
.content{ 
 
background:rgba(0,0,0,0.5); 
 
z-index:0; 
 
position:relative; 
 
} 
 
.col-1{ 
 
position:relative; 
 
float:left; 
 
    width:50%; 
 
    transition: width 0.5s; 
 
height:100%; 
 
background-image:url('../images/ngnlfull.jpg'); 
 
background-repeat:no-repeat; 
 
background-size: cover; 
 
} 
 

 
.col-1:hover{ 
 
width:100%; 
 
} 
 
.col-1c{ 
 
background-color: rgba(0, 0, 0, 0.7); 
 
float:left; 
 
width: 100%; 
 
height: 100%; 
 
} 
 
.col-1c img{ 
 
display:block; 
 
margin:auto; 
 
width:100%; 
 
border-radius:50%; 
 
margin-top:25%; 
 
} 
 
body{ 
 
margin: 0px; 
 
padding: 0px; 
 
outline: none; 
 
border: 0px; 
 
background-image: url('../images/bg.jpg'); 
 
background-repeat: no-repeat; 
 
background-attachment: fixed; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<script type="text/javascript" src ="js/a.js"></script> 
 
<link rel="stylesheet" href="css/a.css" type="text/css"> 
 
</head> 
 
<body> 
 
<div class="content"> 
 
    <div class="col-1" id="collum1"> 
 
     <div class="col-1c" id="collum1c"> 
 
      <img src="https://i.stack.imgur.com/zcdbj.jpg?s=48&g=1" onmouseover="colmover1()"> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

+0

thxが必要です。 – yl2201