在飞行中为div标签添加css样式

时间:2017-09-24 23:41:43

标签: javascript jquery css3

我有两个隐藏的块,我想用稍微动画显示。我用jquery'添加css样式。方法 .css 。但它可能只是凌驾于主要风格之上,动画也没有发生任何事情。

Here is fiddle

启动隐藏块的CSS

.da727e, .ac6c82 {
  display: none;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

我用.css方法改变css后

item.css({'display' : 'block', 
          'visibility' : 'visible', 
          'opacity' : '1', 
          'transition' : 'visibility 0s, opacity 0.5s linear'});

一点js& jquery

var rectContainer = [
    $(".da727e"),
    $(".ac6c82"),
];

for(var i = 0; i <= rectContainer.length; i++) {
    var item = rectContainer[i],
        container = $("html, body"),
        wrapper = $('.wrapper');

      (function(item) {
            $('.ffbc67').click(function() {
                item.css({'display' : 'block', 'visibility' : 'visible', 'opacity' : '1', 'transition' : 'visibility 0s, opacity 0.5s linear'});

                wrapper.css({'display' : 'flex', 'visibility' : 'visible', 'height' : '100vh'});

                container.animate({
                    scrollTop: item.offset().top
                }, 250);
            });
  })(item);
}

点击第一个块然后出现另一个块之后,尝试检查最后两个块,并检查从0开始改变不透明度&gt; 1,你会看到这个轻微的动画。我怎样才能实现它,问题出在哪里?

GIF for demonstration

0 个答案:

没有答案