Jquery attr
본문
안녕하세요!! 다름이아니라.. 제이쿼리 어트리뷰트를 사용해서 이미지 -> 이미지로 전환을 시키고싶은데
padein out을 하면 불투명값으로 하다보니까 천천히 전환이안돼더라구요.. 혹시 css의 transition처럼 부드럽게 이미지 -> 이미지 로 넘기는 방법중에 jquery로도 할수있는개 있을까요 ? ㅠㅠ
답변 1
$(document).ready(function() {
var changeImg = "교체할 이미지";
var originImg = "";
$(이미지).hover(function() {
var $this = $(this);
originImg = $this.attr('src');
$this.stop().animate({
opacity: 0
}, 500, function() {
$this.attr('src', changeImg).stop().animate({
opacity: 1
}, 500)
})
}, function() {
var $this = $(this);
$this.stop().animate({
opacity: 0,
}, 500, function() {
$this.attr('src', originImg).stop().animate({
opacity: 1
}, 500);
originImg = '';
})
});
});
https://codepen.io/moon-chai-jung-arkiad/pen/RwJYdjV
이방식은 마우스오버시 사진이 오퍼시티값으로 하얗게 돼고 다음 보여질 이미지가 페이드인 됍니다 제가 찾던 방식은 하얗게 돼지않고 바로 다음 이미지로 전환돼는 방법 이였습니다 답변 주셔서 감사합니다
그렇다면 그냥 교체할 이미지를 보여지는 이미지위에 index값을 높여서 띄워놓고 해당 이미지의 부모에 over됐을때 페이드인 해주시거나,
아니면 이미지를 css에 백그라운드이미지와 트랜지션 주시고 호버했을때 백그라운드이미지를 교체해주는게 가장 쉬운방법입니다. 다만 css로 작업하게 되면 seo에서 약간 문제되는게 있긴합니다.
제가 이미지를 가져오는 방식이 sql로 뽑아오는 방식이라 어쩔수없이 jquery를 사용해야하는대 방법이 있을까요?
그러시면 이미지위에 앱솔루트로 빈 엘리먼트 하나 띄워놓고 display none 시켜놓고, sql로 뽑아온 이미지 주소를 img태그를 자바스크립트로 생성해서 fadeIn해주는 방법도 있겠네요
오오.. 솔루션 감사합니다 !
https://codepen.io/moon-chai-jung-arkiad/pen/RwJYdjV
images2 에 걸린 이벤트 확인해주세요
선생님이 말씀해주신대로 2번째 사진을 가져와서 absolute로 뒤에 깔아놓고 z-index로 1번 사진을 메인으로 새운다음에 1번사진만 불투명도를 조절하니까 원하는그림이 나오내요 ㅎㅎ 감사합니다!
