javascript - 自定义滑出 div jQuery 脚本

Question

我的脚本还有一些问题。我正在尝试为“与团队见面”页面实现响应式滑出 div 脚本。我认为它的工作方式是，当单击此人的图像时，它会滑出他们的个人简介。不过我遇到了一些问题。

1) 脚本可以正常工作，直到您单击该行中的第三个或第四个图像:

• 当单击第三个图像时，它会很好地滑出 div，但会在下一行上创建一个空白空间(我假设它将图像推到新行上，但也添加了边距.. .)

• 单击第四个图像时，它正在容器外部创建生物。我能看到解决此问题的唯一方法是让它连续每第四个项目以相反的方式滑动。我可以使用我的 CMS 动态向 div 添加计数器类，只是不确定如何在 javascript 中引用它。

2)我不确定如何让它响应式地工作。我将平板电脑和手机上的容器从 1/4 降至 1/2。所以我基本上需要将生物容器的边距和大小加倍。我如何在脚本中声明这一点？

提前非常感谢您的帮助。感谢 Trim Kadrui 迄今为止为我提供的剧本帮助。

JS fiddle : http://jsfiddle.net/QrfzA/21/

脚本代码:

$(document).ready(function() {
    $('.team-photo').click(function() {
        var teamBio = $(this).next();
        var nextBlock = $(this).parent().next();
        if(teamBio.width() > 0){
            teamBio.animate({width: 0, opacity: 0});
            nextBlock.animate({marginLeft: '0%'});
        }
        else {
            teamBio.css("display", "inline-block");
            teamBio.animate({width: '100%', opacity: 100});
            nextBlock.animate({marginLeft: '25%'});
        }
    });
});

Answer 1

$(document).ready(function() {
 $('.team-photo').click(function() {
   var teamBio = $(this).next();
   var nextBlock = $(this).parent().next();
   if(teamBio.width() > 0){
    nextBlock.css("clear", "none");
    teamBio.animate({width: 0, opacity: 0});
    nextBlock.animate({marginLeft: '0%'});
   }
   else {
    teamBio.css("display", "inline-block");
    teamBio.animate({width: '100%', opacity: 100});
    if(nextBlock.position().left>10) {
        nextBlock.animate({marginLeft: '25%'});
        if(!nextBlock.next().length || nextBlock.next().position().left<10) {
            nextBlock.animate({marginLeft: '0'});
            nextBlock.css("clear", "both");
        }
    }
}
});
});

if(nextBlock.position().left>10)这样做的技巧，基本上它检查 nextBlock 左侧是否有超过 10 个像素然后应用 margin left 属性。

我检查了是否 nextBlock.position().left大于10 ，您可以根据需要进行设置。

编辑: nextBlock.next().position().left<10还需要检查以防万一，该图像是该行中的最后一个。 CSS 属性 clear:both用于将下一个 block 发送到新行，而不是使用边距。

这是更新后的JSFiddle .