页面/ Div内容在点击时淡入和淡出

Question

我已经在我的招聘网站上工作了好几天了。我是编程新手。请点击每个就业空缺div，我需要加载就业评论内容的脚本，点击就业评论内容页面上的“关闭”时淡入。感谢。

Answer 1

您可以使用jquery实现这一目标：http://api.jquery.com/fadeout/

$( "#vacancy-div-id" ).click(function() {
  $( "#id-of-what-you-want-to-fade-out" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});

要淡入，您可以使用：http://api.jquery.com/fadein/

$( "#close-button-id" ).click(function() {
  $( "#id-of-what-you-want-to-fade-in" ).fadeIn( "slow", function() {
    // Animation complete
  });
});

更详细的例子 - 把它放在你的html中：

<script>
    $( "#close-button-id" ).click(function() {
      $( "#id-of-what-you-want-to-fade-in" ).fadeIn( "slow", function() {
        // Animation complete
      });
    });
</script>

如果你不知道你想要点击什么来触发fadeIn动画，你可以右键单击该元素并单击inspect，它会显示你页面的html。

Answer 2

    #start{
        height:100px;
        width:300px;
        border:3px solid red;
        display: none;

    }
    #start.fadeIn{
        display: block;
        animation-name:fadein;
        animation-duration:3s;
    }
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

document.getElementById('run').addEventListener('click',function(){
        document.getElementById('start').classList.toggle('fadeIn');
    })


<div id="start" class="rotating">
            some text  some text  some text  some text  some text
    </div>