테스트 사이트 - 개발 중인 베타 버전입니다

제이쿼리 애니메이션 질문입니다. 채택완료

YeChanDo 8년 전 조회 4,386

제이쿼리관련해서 질문 드립니다.

실력이 부족해 부탁드립니다!~ 

 

웹사이트에서 스크롤을 내리면 제이쿼리를 먹어서 css가 변합니다..
그런데 애니메이션 효과를 줘서 천천히 변했으면 합니다. 

배경을 이미지로도 주고 백그라운드로도 주면서 시도를 했는데 제가 실력이 없습니다.

 

아래 코드 확인 부탁드립니다.

배우면서 하고있습니다.

양해부탁드립니다.

 

</p><p>  $(window).scroll(function () {</p><p>    var scrollMainBar = $(this).scrollTop();</p><p>    if (scrollMainBar > 200) {</p><p>       $(".main_sub").css("background-position", "235px 0px");</p><p>        // $(".main_sub").animate({ : ' ', opacity: '0.4'}, "slow");</p><p>    } else {</p><p>       $(".main_sub").css("background-position", "0px");</p><p>    }</p><p>  });</p><p> });</p><p>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
8년 전

</p><p class="p1" style="-webkit-text-stroke-width: 0px;">if(scrollMainBar > 200) {</p><p class="p1" style="-webkit-text-stroke-width: 0px;"><span style="font-size: 14.7px;">    $(".main_sub").animate({"background-position": "235px 0px"}, 1000);</span> </p><p class="p1" style="-webkit-text-stroke-width: 0px;">} else {</p><p class="p1" style="-webkit-text-stroke-width: 0px;"><span style="font-size: 14.7px;">    $(".main_sub").animate({"background-position": "0px"}, 1000);</span> </p><p class="p1" style="-webkit-text-stroke-width: 0px;"><span style="font-size: 14.7px;">}</span></p><p class="p1" style="-webkit-text-stroke-width: 0px;"><span style="font-size: 14.7px;">

 

이런식으로 하면 될 것 같은데요??

1000에는 애니메이션이 지속될 시간을 입력하시구요.

 

http://api.jquery.com/animate/">http://api.jquery.com/animate/ 

한 번 확인해보세요!

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

Y
YeChanDo
8년 전
애니메이션으로 주면... 조금 늦게 실행되더라구요...
말씀하신데로 한번 해보겠습니다!!~
감사합니다.
Y
YeChanDo
8년 전
말씀하신데로 했는데 안됩니다..ㅜㅜ
답변 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인