自定义滑出div jQuery脚本

我有一个脚本更多的问题。我正试图实现一个响应式滑出div脚本为“遇见团队”页面。我看到它的工作方式是，当人物图像被点击时，它滑出他们的生物。尽管我遇到了一些问题。直到您单击第三或第四图像的行自定义滑出div jQuery脚本

1）脚本工作正常：

当点击第三图像，它滑出格罚款，但在未来创建一个空白行（我假设它将图像推到一条新线上，但也添加了一个边距...）
当单击第4个图像时，它将创建容器外部的生物。唯一能看到这个问题的方法就是让它连续滑动4次。我可以使用我的CMS动态地向div添加计数器类，只是不确定如何在javascript中引用它。

2）我不确定如何使其工作响应。我将平板电脑和手机上的容器从1/4放到1/2。所以我需要基本上将生物容器的边距和尺寸加倍。我该如何在脚本中声明？

非常感谢您的任何帮助。感谢帮助我完成剧本的Trim Kadrui。

Script代码：

$(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%'}); 
     } 
    }); 
});

来源

2014-03-25 kala233

CSS悬停效果也可以应用 – 111

$(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)的伎俩，基本上检查，如果有超过10个像素nextBlock，然后左应用保证金留下的财产。

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

编辑：nextBlock.next().position().left<10也需要检查的情况下，图像是最后一个，但在那一行。 CSS属性clear:both用于将下一个块发送到新行，而不是使用余量。

这里是更新的JSFiddle。

来源

2014-03-25 12:03:21 phpcoderx

你好phpcoderx，感谢这个虽然它似乎没有改变任何东西？仍然有相同的问题。 http://jsfiddle.net/QrfzA/22/ – kala233

@ kala233点击第三张图片时没有检查问题，编辑了我的答案，这应该工作。 – phpcoderx

自定义滑出div jQuery脚本

回答

相关问题