迭代并显示隐藏的子divs jquery

时间:2016-04-03 23:23:21

标签: jquery

我有<div id='content'> <p> foo </p> <p> bar </p> </div>。每个<p>代码都将CSS设置为visbility: hidden。 我想迭代<p>中的每个<div id='content'>标记,将段落的可见性更改为visible,延迟500,然后对下一段执行相同的操作。我知道.delay(500)无法使用CSS动画,并且您需要使用.queue(),但我不知道如何执行此操作。

$('#content').children('p').each(function() 
{
       $(this).css('visibility', 'visible'); 
       //delay before continuing iteration
});

CSS:

#content
{
    position: absolute;
    font-size: 25px;
    width: 50%;
    top: 20%;
    left: 5%;
    -moz-animation-duration: 2s; 
    -moz-animation-delay: 1s;
    -moz-animation-iteration-count: 1;
}
p
{
    -moz-animation-duration: 1s; 
    -moz-animation-delay: 2s;
    -moz-animation-iteration-count: 1;
    visibility: hidden;
}

2 个答案:

答案 0 :(得分:0)

正如@Tasos建议的那样,

var __OBJECTS = [];

$('#content').children('p').each(function() {
    __OBJECTS.push($(this));
});

addPositioningClasses();

function addPositioningClasses() {
    var $card = __OBJECTS.shift();
    $card.css('visibility', 'visible'); 
    if (__OBJECTS.length) {
        setTimeout(addPositioningClasses, 500)
    }
}

效果很好。

答案 1 :(得分:0)

正如我从标题中所理解的那样,您需要使用JQ,因此您可以使用此代码

    var autoMapperProfileTypes = AppDomain.CurrentDomain.GetAssemblies().SelectMany(a => a.GetTypes().Where(p => typeof(Profile).IsAssignableFrom(p) && p.IsPublic && !p.IsAbstract));
    var autoMapperProfiles = autoMapperProfileTypes.Select(p => (Profile)Activator.CreateInstance(p));
    builder.Register(ctx => new MapperConfiguration(cfg =>
    {
        foreach (var profile in autoMapperProfiles)
        {
            cfg.AddProfile(profile);
        }
    }));
    builder.Register(ctx => ctx.Resolve<MapperConfiguration>().CreateMapper()).As<IMapper>().PropertiesAutowired();

https://jsfiddle.net/tvz039nk/3/