div 또는 span이 동적으로/지속적으로 너비를 변경합니다.

jQuery animate 의 예제 코드가 있는데, div를 사용하면 div가 넓어 지므로 시간에 따라 카운터를 기반으로 자동으로 div를 확장하고 싶습니다. . 당신은에 의해 상대 애니메이션을 사용할 수 있습니다div 또는 span이 동적으로/지속적으로 너비를 변경합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org"> 
<style type="text/css"> 
div { 
background-color:#bca;width:100px;border:1px solid green; 
} 
</style> 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"> 
</script> 
    <title></title> 
    </head> 
    <body> 
    <button id="go">» Run</button> 
    <div id="block"> 
     Hello! 
    </div> 
<script type="text/javascript"> 
    var someWidth = "70%"; 
/* Using multiple unit types within one animation. */ 
$("#go").click(function(){ $("#block").animate({ width: someWidth, opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500);}); 
</script> 
    </body> 
</html>

출처

2013-01-17 user1892770

좋은 출발을 보였습니다. 찾고있는 솔루션으로 이동하려고 시도한 내용에 대한 연구 나 다른 코드가 있습니까? –

코드 샘플하십시오 "70 %"나는 폭을 대체 할 변수를 사용하는 방법을 알아낼 수 없습니다 이 때마다 기능 5%에 의해 사업부를 확대 할

$("#go").click(function(){ 
     $("#block").animate({ 
          width: "+=5%", 
          opacity: 0.4, 
          marginLeft: "0.6in", 
          fontSize: "3em", 
          borderWidth: "10px" 
          }, 1500); 
     });

을 다음과 같이 +=를 지정하는 것은 당신의 필요에 맞게 called.Adjust입니다. 간격 기준으로 animate을 사용하려는 경우 setInterval에서이 함수를 호출하십시오. 이것은 2000 밀리 초마다 animate을 호출합니다.

setInterval(function(){ 

     $("#block").animate({ 
          width: "+=5%", 
          opacity: 0.4, 
          marginLeft: "0.6in", 
          fontSize: "3em", 
          borderWidth: "10px" 

        }, 1500);    

      },2000);

출처

2013-01-17 21:08:51 malkassem

도움을 주셔서 감사합니다. 아래 링크에 게시 된 코드를 생각해 냈습니다. 애니메이션 부분은 제대로 작동하지만 외부 자바 스크립트를 가져 오지 않기 때문에 링크에서 작동하지 않습니다. 상자를 클릭하면 상자의 배경색을 설정할 수 있습니다. 내 질문은 사용자가이 웹 페이지를 열 때 자동으로 사용되도록 사용자 색 선택을 저장하는 방법입니다. 이 페이지는 웹 서버가 아닌 로컬 하드 드라이브에서 열립니다. Chrome 및 IE8에서 작동하려면 쿠키 또는 로컬 저장소가 필요합니다. [link] http://jsfiddle.net/3m4uF/ [link] – user1892770

: 폭에 대한 변수를 사용하는

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org"> 
<style type="text/css"> 
div { 
background-color:#bca;width:100px;border:1px solid green; 
} 
</style> 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"> 
</script> 
    <title></title> 
    </head> 
    <body> 
    <button id="go">» Run</button> 
    <div id="block"> 
     Hello! 
    </div> 
<script type="text/javascript"> 
/* Using multiple unit types within one animation. */ 
$("#go").click(function(){ $("#block").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500);}); 
</script> 
    </body> 
</html>

출처

2013-01-17 21:18:26

div 또는 span이 동적으로/지속적으로 너비를 변경합니다.

답변

관련 문제