当调整窗口大小

Question

在我的网站更改jQuery的动画我用下面的代码进行动画悬停动作：

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时，图标将动画为'top：100px'而不是75px。

我已经做了一个开始，但不知道如何走得更远。

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); 
});​ 

但是，如果你认为这是太大的力气（尽管它更漂亮），你永远可以做到这一点在JavaScript太：

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; 
    } 
}