Jquery 애니메이션이 작동하지 않습니다. 너비가

입니다. 저는 자바 스크립트와 자바 스크립트에 익숙하지 않습니다. 이미지가 전체 신체의 너비 50 % -> 100 %를 채우고 싶습니다. 내가 그것을 가져 가면 100 %로 변경하고 싶습니다.Jquery 애니메이션이 작동하지 않습니다. 너비가

더 많은 단어가 유래가 원하는 원인이 더

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; 
}

자바 스크립트 :

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%'}); 
}

출처

2017-12-02 yl2201

colmover1은 nerver가 붙어있다. 애니메이션에는 from과 to 및 duration이 필요합니다. 문서를 읽으십시오. 많은 컨테이너를 사용할 때 폭과 높이를 전파하십시오. 도움이 필요하면 –

// 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>

출처

2017-12-02 15:57:52

thxx! – yl2201

Jquery 애니메이션이 작동하지 않습니다. 너비가

답변

관련 문제