jQuery 애니메이션 및 타이밍

저는 기술적으로 jQuery를 처음 사용하고 있으며 익숙해지기 위해 코드를 구현하려고합니다.jQuery 애니메이션 및 타이밍

그래서 내가 페이지 위로 이동하고 사용자가 페이지의 아무 곳이나 클릭 할 때 불투명도를 1로 변경하려고합니다. 내가 애니메이션을 위해 노력하고 body있어 DIV의 ID가 작업이되도록 나는 HTML 페이지의 본문에 준 그냥 ID입니다

$(document).ready(function(e) { 
    $("#body").click(function() { 
     setTimeout(function() { 
      $("#name").animate(function() { 
       bottom:"500px"; 
       opacity:"1"; 
      }, 1000); 
     }, 2000); 
    }); 
});

주 name 것을 : 여기

내 코드입니다 페이지의 아무 곳이나 아무 것도 클릭하지 않으면 트리거됩니다.

출처

2013-08-17 SaucyGuy

입니다 그리고 질문은? – adeneo

그냥 구글 "jQuery"와 "타이머"그리고 당신은 찾을 것이다 : http://api.jquery.com/delay/ 첫 번째 답변과 같은 : 불투명도는 요소가 불투명도가 0이면 1에서 0으로 간다 CSS 규칙. 당신은 아무 것도 볼 수 없을 것입니다. – Mic

저는 CSS 사람들에게 불투명도를 0으로 설정하는 것을 잊지 않을 것입니다! – SaucyGuy

은 내가 animate 기능을 수행한다. 쉼표로 표시되어야하는 애니메이션 속성에 세미 콜론을 추가합니다. 여기

$("#wrap").on('click', function() { 
    setTimeout(function(){ 
     $("#name").animate({ 
      bottom:"500px", 
      opacity:"1" 
     }, 1000); 
    }, 2000); 
});

내 FIDDLE

출처

2013-08-17 17:19:05

감사합니다. 귀하의 답변이 저에게 최고로 도움이되었습니다. 그러나 실수는 HTML (잘못된 ID 사용)에서 비롯된 것으로 나타났습니다. – SaucyGuy

#body로 할 것 같아. 도! 어쨌든, 당신이 도움이된다면 적어도이 대답을 upvote하거나 올바른 것으로 표시 할 수 있겠습니까? 건배. –

불투명도를 0에서 1로 변경하려면 먼저 CSS로 0으로 설정해야합니다. 이미 1 일 때 1로 애니메이션을하면 아무 일도 일어나지 않습니다!

출처

2013-08-17 17:10:20 MattLoszak

예, CSS 023으로 설정되었습니다. – SaucyGuy

개체의 속성은 세미콜론이 아닌 쉼표로 구분해야합니다. 또한, animate는 함수가 아니라 객체를 취합니다. 이 시도 : 그것은 CSS 것처럼

$("#name").animate({ 
    bottom: "500px", 
    opacity: "1" 
}, 1000);

출처

2013-08-17 17:12:27

헤드 업에 감사드립니다! 완전히 잊어 버렸습니다 : p – SaucyGuy

jQuery 애니메이션 및 타이밍

답변

관련 문제