간단한 전자 상거래 제품 갤러리를 만들려고합니다. 사용자가 썸네일을 클릭 할 때마다 이미지가 올바르게로드되지만 이미지가 선택한 이미지로 교체되기 때문에 잠시 동안 레이아웃 위치가 이동합니다. 아무도 이것이 발생하지 않는 내 코드를 정리하는 방법을 알고 있습니까? 저는 Jquery를 처음 사용하므로 올바른 방법으로 수행하지 않을 것입니다.
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
다음은 데모입니다.
#image대신 img내부를 숨기지 마십시오 .
그리고 나는 fadeOut그것을 더 부드럽게 보이도록 숨기는 대신 추가 했습니다. 그런 다음 fadeIn콜백에서fadeOut
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image img').fadeOut("slow", function(){
$('#image').html('<img src="' + image + '"/>');
$('#image').fadeIn('slow');
});
return false;
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다