javascript - 使用 Jquery 将视口(viewport)宽度大小应用于悬停时的 div

Question

我有三个水平排列的 div。每个都从 JQuery 更新大小函数中获取它们的宽度大小。但是，不是像这样加载，我希望它们以 300px 加载并在悬停时根据视口(viewport)大小进行动画处理(类似于悬停时不透明度的动画处理方式)。

这是我目前所拥有的:

http://werdnaworks.com/test/

Answer 1

在每个 <div>悬停 animate()两者 width和 opacity .但是您还必须将 parent width 设置为 total <div> s 的宽度，以便您可以将它们保持在一行。

var $div = $('div'),
    divW = $div.width(),//300px
    divLen = $div.length,
    windowW = window.innerWidth;

$('body').width(divW*divLen);

$div.hover(function(){
    $(this).stop().animate({width:windowW, opacity:1},'fast');
    $('body').stop().animate({width:windowW+(divW*divLen-1)},'fast');      
},function(){
    $(this).stop().animate({width:divW, opacity:0.5},'fast');
    $('body').stop().animate({width:divW*divLen},'fast');
});

请看这个fiddle .

您可能还想自动滚动到 <div>被盘旋。你可以用动画来做到这一点 scrollLeft .

$div.hover(function(){
    var offsetLeft = $(this).offset().left;
    $(this).stop().animate({width:windowW, opacity:1},'fast');
    $('body').stop().animate({width:windowW+(divW*divLen-1), scrollLeft:offsetLeft},'fast');      
},function(){
    $(this).stop().animate({width:divW, opacity:0.5},'fast');
    $('body').stop().animate({width:divW*divLen},'fast');
});

检查这个fiddle