변경 jQuery를 애니메이션 창 내 웹 사이트에

Question

크기를 조정 나는 호버 동작을 애니메이션으로 다음 코드를 사용

jQuery('#portfolio .project').hover(function() { 
    // Animate icon 
    jQuery(this).find('.overlay').animate({opacity:1.0, top:'75px'}, 300); 
}, function() { 
    // Hide icon 
    jQuery(this).find('.overlay').animate({opacity:0, top:'155px'}, 300); 
}); 

때문에 사용자가 프로젝트를 가리킬 때 아이콘이 오버레이로 표시됩니다.

이 경우 이미지의 너비는 940 픽셀입니다. 그러나 웹 사이트는 반응 형이 될 것이므로 브라우저의 창 크기에 따라이 코드를 가변적으로 만들 수 있습니까? 예를 들어, 브라우저 너비가 768px이면 아이콘이 75px 대신 '상단 : 100px'로 움직입니다.

나는 이것을 시작했지만 더 멀리 갈 생각이 없습니다.

jQuery(window).resize(function() { 
    var window_width = jQuery(window).width(); 

Answer 1

솔직히 말해서 가장 쉬운 방법은 CSS입니다.

페이지가 반응 적이기 때문에 이미 다른 창 크기에 대해 서로 다른 CSS 스타일을 사용하고 있습니다. 추가 클래스를 추가하고이를 토글하면 다른 값을 쉽게 설정할 수 있습니다. 당신의 CSS에 대한

:

다음

/* 
* if the device width is bigger or equal to 768, 
* set the hover top property to 100px 
*/ 

@media only screen and (min-device-width : 768px) { 
    .overlay.hover { 
     top: 100px; 
    } 
} 

/* 
* if the device width is smaller or equal to 767 
* set the hover top property to 75px 
*/ 

@media only screen and (max-device-width : 767px) { 
    .overlay.hover { 
     top: 75px; 
    } 
} 

, 남아있는 모든 전환 클래스입니다! 당신이 (가 훨씬 더 예뻐 비록)이 너무 많은 노력을 생각하면

jQuery('.container').hover(function() { 
    // Animate icon 
    jQuery(this).find('.overlay').stop().toggleClass('hover', 300).animate({ 
     opacity: 1.0 
    }, 300); 
}, function() { 
    // Hide icon 
    jQuery(this).find('.overlay').stop().toggleClass('hover', 300).animate({ 
     opacity: 0.2 
    }, 300); 
});​ 

그러나, 당신은 너무 자바 스크립트에서 할 항상 수 있습니다 : 브라우저의 폭이보다 큰 경우

var animatetop = getAnimateTop(); 

jQuery(window).resize(function() { 
    animatetop = getAnimateTop(); 
}); 

jQuery('#portfolio .project').hover(function() { 
    // Animate icon 
    jQuery(this).find('.overlay').stop().animate({ 
     opacity: 1.0, 
     top: animatetop + 'px' 
    }, 300); 
}, function() { 
    // Hide icon 
    jQuery(this).find('.overlay').stop().animate({ 
     opacity: 0, 
     top:'155px' 
    }, 300); 
}); 

function getAnimateTop() { 
    if(jQuery(this).width() >= 768) { 
     return 100; 
    } else { 
     return 75; 
    } 
}