https://easings.net/ko
사이트에 잘 정리되어있다.
| [jQuery] 스크롤시 제이쿼리로 메뉴 상단에 고정하기 (0) | 2018.11.06 |
|---|---|
| [jQuery] 항상 최신버전의 제이쿼리 가져오기 (0) | 2018.10.23 |
| [jQuery] 제이쿼리로 클립보드에 주소 복사하기 ( 모든 브라우저 ) (0) | 2017.12.27 |
| [jQuery] 제이쿼리 불러오기 (0) | 2017.12.13 |
| [jQuery] 클릭한 id값 가져오기 (0) | 2017.11.28 |
$(function () {
var navOffset = $(".menu-section").offset().top;
$(window).scroll( function() {
var scrollTop = $(document).scrollTop();
if (navOffset < scrollTop) {
$(".menu-section").addClass('nav-fixed');
$(".menu-section").addClass('top-zero');
} else {
$(".menu-section").removeClass('nav-fixed');
$(".menu-section").removeClass('top-zero');
}
});
});
| [jQuery] 제이쿼리 애니메이션 이동효과 (0) | 2018.11.19 |
|---|---|
| [jQuery] 항상 최신버전의 제이쿼리 가져오기 (0) | 2018.10.23 |
| [jQuery] 제이쿼리로 클립보드에 주소 복사하기 ( 모든 브라우저 ) (0) | 2017.12.27 |
| [jQuery] 제이쿼리 불러오기 (0) | 2017.12.13 |
| [jQuery] 클릭한 id값 가져오기 (0) | 2017.11.28 |
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<head></head> 사이에 넣어도 되고
</body>
위 스크립트가 집결되어있는 곳에 제일 상단에 넣어도 된다.
이렇게 쓰면 항상 최신 버전의 제이쿼리를 가져오지만 새로 사용되면서 사용이 더이상 지원되지 않는
함수들도 있기에 유지보수 관리를 좀 더 철저히 하기 바란다.
| [jQuery] 제이쿼리 애니메이션 이동효과 (0) | 2018.11.19 |
|---|---|
| [jQuery] 스크롤시 제이쿼리로 메뉴 상단에 고정하기 (0) | 2018.11.06 |
| [jQuery] 제이쿼리로 클립보드에 주소 복사하기 ( 모든 브라우저 ) (0) | 2017.12.27 |
| [jQuery] 제이쿼리 불러오기 (0) | 2017.12.13 |
| [jQuery] 클릭한 id값 가져오기 (0) | 2017.11.28 |
function clipboard(str){
$('#clip_target').val(str);
$('#clip_target').select();
try {
var successful = document.execCommand('copy');
alert('클립보드에 주소가 복사되었습니다. Ctrl + V 로 붙여넣기 하세요.');
} catch (err) {
alert('이 브라우저는 지원하지 않습니다.');
}
}
| [jQuery] 스크롤시 제이쿼리로 메뉴 상단에 고정하기 (0) | 2018.11.06 |
|---|---|
| [jQuery] 항상 최신버전의 제이쿼리 가져오기 (0) | 2018.10.23 |
| [jQuery] 제이쿼리 불러오기 (0) | 2017.12.13 |
| [jQuery] 클릭한 id값 가져오기 (0) | 2017.11.28 |
| [jQuery] 스크롤 맨 위로 부드럽게 이동 (0) | 2017.11.28 |
script 불러오는 곳에 이렇게 불러와도 되고
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
js 파일을 직접 다운받아서 로컬에서 불러와도 된다.
| [jQuery] 항상 최신버전의 제이쿼리 가져오기 (0) | 2018.10.23 |
|---|---|
| [jQuery] 제이쿼리로 클립보드에 주소 복사하기 ( 모든 브라우저 ) (0) | 2017.12.27 |
| [jQuery] 클릭한 id값 가져오기 (0) | 2017.11.28 |
| [jQuery] 스크롤 맨 위로 부드럽게 이동 (0) | 2017.11.28 |
| [jQuery] 딜레이주기 .delay();, setTimeout(); (0) | 2017.11.28 |
number라는 클래스에 마우스 오버했을 경우 그 아이디 값 가져오기
$('.number').mouseover(function(){
var id_check = $(this).attr("id");
});
number라는 클래스를 클릭했을 경우
$('.number').click(function(){
var id_check = $(this).attr("id");
});
| [jQuery] 제이쿼리로 클립보드에 주소 복사하기 ( 모든 브라우저 ) (0) | 2017.12.27 |
|---|---|
| [jQuery] 제이쿼리 불러오기 (0) | 2017.12.13 |
| [jQuery] 스크롤 맨 위로 부드럽게 이동 (0) | 2017.11.28 |
| [jQuery] 딜레이주기 .delay();, setTimeout(); (0) | 2017.11.28 |
| [jQuery] 내가 원하는 엘리먼트(태그) 좌표구하기 (0) | 2017.11.28 |
HTML
<div class="top-button">TOP</div>
CSS
.top-button { width: 50px; height: 50px; border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: #FFFFFF; color: #212121; opacity: 0.3; bottom: 0px; position: fixed; right: 10px; text-align: center; line-height: 50px; display: none; cursor: pointer;}
JQUERY
$(function(){
$('.top-button').click(function(){
$('html, body').animate({scrollTop: 0}, 500);
});
});
| [jQuery] 제이쿼리 불러오기 (0) | 2017.12.13 |
|---|---|
| [jQuery] 클릭한 id값 가져오기 (0) | 2017.11.28 |
| [jQuery] 딜레이주기 .delay();, setTimeout(); (0) | 2017.11.28 |
| [jQuery] 내가 원하는 엘리먼트(태그) 좌표구하기 (0) | 2017.11.28 |
| [jQuery] 클래스 있는지 체크하기 (0) | 2017.11.28 |
jQuery에서 애니메이션을 주고 delay를 주고 난 후에 다른 애니메이션을 진행하고 싶은 경우가 있다.
그럴 때는
$("div").fadeIn(1000).delay(1000).fadeOut(1000);
이렇게 할 경우에는 div를 1초동안 점점 나타나게 한 후, 1초동안 기다렸다가 1초동안 점점 사라지게 하는 소스이다.
만약 여러가지 jQuery를 한번에 딜레이를 주고싶다면
setTimeout();을 사용하면 된다.
사용법은 간단하다.
setTimeout(function() {
$('div').fadeIn(200);
$('div').animate({marginLeft: '380px'}, 200);
}, 200);
를 0.2초동안 점점나타나게 하고 margin-left를 380px를 준다 라는 의미다.
그걸 setTimeout으로 감싸고 맨 뒤에 숫자를 넣어주면
0.2초 후에 위에 소스를 진행해라 라는 뜻이다.
| [jQuery] 클릭한 id값 가져오기 (0) | 2017.11.28 |
|---|---|
| [jQuery] 스크롤 맨 위로 부드럽게 이동 (0) | 2017.11.28 |
| [jQuery] 내가 원하는 엘리먼트(태그) 좌표구하기 (0) | 2017.11.28 |
| [jQuery] 클래스 있는지 체크하기 (0) | 2017.11.28 |
| [jQuery] Class 추가/삭제, CSS 변경/추가 (0) | 2017.11.28 |
var obj = $("#id_name").offset();
을 하게 되면 id="id_name"을 가지고 있는 엘리먼트(태그)의 top과 left의 값을 가지고 오게 된다.
사용방법은
function id_offset_test(){
var obj = $("#id_name").offset();
console.log("Left : " + obj.left + ", Top : " + obj.top);
}
으로 사용하게 되면 된다
값을 바꿔주려면
var n = 10;
var top = obj.top + n;
이후에 css 변경이던가 animate를 사용해서 넣어주면 변경된 값이 들어가게 된다.
| [jQuery] 스크롤 맨 위로 부드럽게 이동 (0) | 2017.11.28 |
|---|---|
| [jQuery] 딜레이주기 .delay();, setTimeout(); (0) | 2017.11.28 |
| [jQuery] 클래스 있는지 체크하기 (0) | 2017.11.28 |
| [jQuery] Class 추가/삭제, CSS 변경/추가 (0) | 2017.11.28 |
| [jQuery] form을 동적 추가해서 POST로 페이지 이동 (0) | 2017.11.28 |
if($("#id_name").hasClass("확인할 클래스명") === true){
echo "클래스 값이 있습니다.";
}else{
echo "클래스 값이 없습니다.";
}
| [jQuery] 스크롤 맨 위로 부드럽게 이동 (0) | 2017.11.28 |
|---|---|
| [jQuery] 딜레이주기 .delay();, setTimeout(); (0) | 2017.11.28 |
| [jQuery] 내가 원하는 엘리먼트(태그) 좌표구하기 (0) | 2017.11.28 |
| [jQuery] Class 추가/삭제, CSS 변경/추가 (0) | 2017.11.28 |
| [jQuery] form을 동적 추가해서 POST로 페이지 이동 (0) | 2017.11.28 |