묻고답하기
슬라이드 토글 제이쿼리인데 두 개 차이를 좀 알려주실 수 있나요?
2014.10.21 18:07
마우스를 올리면 보이게 하고, 띄면 사라지는 소스입니다.
처음엔 이렇게 코드를 짰습니다. 그런데 소스를 적용시켜놓고 보니,
화면이 부드럽지 않게 되는 거였습니다.
항목이 여러 개일 경우 더 그렇더군요.
http://jsfiddle.net/eond/21yqsghp/
다른 곳을 참조해서 이렇게 다시 만들었습니다.
이렇게 하니깐 화면 움직임이 부드럽게 보이고 사라지더군요.
무슨 차이 때문에 이런 걸까요???
예제에서 차이를 확 느끼시진 못해도 몇 번 마우스를 움직여보시면
그 차이를 좀 아실 겁니다. ^^;;
http://jsfiddle.net/eond/0azjgrf7/
참조
http://jsfiddle.net/HYrc3/
http://ui-cloud.com/advanced-search-psd/
XE에서 사용가능한 다양한 소스를 판매하고 있습니다.
댓글 6
-
공수래
2014.10.21 18:26
-
공수래
2014.10.22 01:11
ㅎㅎ 죄송요.제가 좀 좋은 나라에 살아서요. 구글이나 구글 cdn 사용하는 싸이트는 접속이 안되고 그러는......지금 이시간 새벽 시간 되니까 한참만에 접속은 됩니다.$(this).children().slideDown("slow");느리게$(this).children().slideDown(1000); 임의의 숫자로 조정$(this).children().slideDown("fast"); 빠르게위 옵션의 차이 아닌가요.아래 소스에서도 뒤 숫자를 조정하면 약간의 차이는 나지만원하는 정도의 부드러움이 없어서 jquery-ui.js를 사용하니 원하는 결과를 얻을수 있었기에위 댓글을 드렸습니다$('.dropdown').toggleClass('open', 500);좋은밤 되세요 -
아래 두개의 소스 차이를 여쭈었습니다.서로 비슷한 역할을 하는데 아랫쪽 2번이 좀더 유연하게 움직이는거 같아서요.1) 번 소스$(".count").hide();$(".thumbnail").mouseover(function () {$(this).children().slideDown("slow");}).mouseout(function () {$(".count").hide();});2) 번 소스$('.thumbnail').hover(function () {$(this).find('.count').slideToggle('fast');}, function () {$(this).find('.count').slideToggle('fast');});$('.thumbnail').hover(function () {$(this).find('.count').fadeIn('fast');}, function () {$(this).find('.count').fadeOut('fast');});
-
첫번째 예제가 작동하지않아서 확인은 못했지만
두가지 소스가 동일한 형태의 소스는 아니다보니..
위쪽은 slideDown만 사용되었고 아래쪽은 slideToggle(slideDown, slideUp)이 사용되었네요...
두번째는 추가로 fade함수가 들어가서 좀더 자연스러워 보이는게 아닐런지요?
내부함수를 뜯어보고 작동원리를 알아봐야 정확한 진단이 가능하겠지만...
jquery가 여러개 사용되면 부하가 일어날수 있어서 최소한의로 사용하는게 좋지 않을까 싶습니다..
-
페이드아웃 때문일까요 ㅎㅎㅎ;; 답변 감사합니다.
들어가 볼수가 없어서 ........
정확 하지는 안지만 jquery-ui.js 적용 여부가 아닐까요?