Question

我还有一些脚本问题。我正在尝试为“满足团队”页面实现响应式滑出div脚本。我看待它的工作方式是，当点击人物图像时，它会滑出他们的生物。我遇到了一些问题。

1）脚本正常工作，直到您单击行中的第3或第4个图像：

单击第3张图像时，它会滑出div，但会在下一行创建一个空白区域（我假设它将图像推到新行上，但也添加了一个边距.. 。）
单击第4张图像时，它会在容器外部创建生物。我能看到解决方法的唯一方法是让它以相反的方式为连续的每第4个项目滑动。我可以使用我的CMS动态地为div添加一个计数器类，只是不确定如何在javascript中引用它。

2）我不确定如何让它起作用。我在平板电脑和手机上将容器从1/4降至1/2。所以我需要基本上加倍生物容器的边距和尺寸。我怎样才能在脚本中声明这个？

非常感谢您的帮助。感谢Trim Kadrui，他帮助我完成了迄今为止的剧本。

脚本代码：

$(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个像素，然后应用左边距属性。

我已查看nextBlock.position().left是否大于10，您可以将其设置为满足您的需求。

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

以下是更新后的JSFiddle。

自定义幻灯片div jQuery脚本

1 个答案: