FadeIn 1000 when add class by Click

Question

我正在尝试 fadeIn 1000 当通过点击功能添加 class 时。

HTML

<span class="date-outer">Text will Red on fadeIn</span>

<button class="more-recent-button"></button>

JS

$(".more-recent-button").click(function(){
 $(".date-outer").fadeIn("1000").addClass("more-date-outer");
});

那么当Class 将通过单击按钮添加时如何不透明淡入？可能是这样的：当单击按钮时，内容将 fadeIn 1 次 without Opacity:0 to 1 or without css，表示单击时 fadeIn content 1 次。有什么建议吗？

Answer 1

CSS:

transition-duration: 1s;

编辑： 不透明度淡入：http://jsfiddle.net/rf7mudL5/9/

Answer 2

.fadeIn() 如果元素不可见，则简单地使元素淡入。要为您的情况设置动画颜色，最简单的方法是更改文本的过渡持续时间：

$(".more-recent-button").click(function() {
  $(".date-outer").fadeIn("1000").addClass("more-date-outer");
});

.more-date-outer {
  color: red;
}
.more-recent-button {
  padding: 10px 25px;
}
.date-outer {
  transition: all 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="date-outer">Text will Red on fadeIn</span>
<br/>
<br/>
<button class="more-recent-button"></button>

更新：

如果您想在单击按钮时使文本淡出一次，只需先将其隐藏然后淡入即可。

注：

持续时间不应包含在引号中。
你需要检查文本是否有新的class，只有当它仍然没有时才淡化它。

$(".more-recent-button").click(function() {
  if (!$(".date-outer").hasClass("more-date-outer")) {
    $(".date-outer").hide();
    $(".date-outer").fadeIn(1000).addClass("more-date-outer");
  }
});

.more-date-outer {
  color: red;
}
.more-recent-button {
  padding: 10px 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="date-outer">Text will Red on fadeIn</span>

<br/>
<br/>
<button class="more-recent-button"></button>

Answer 3

如果你需要利用不透明度改变，这个怎么样：

$(".more-recent-button").click(function () {
  if (!$(".date-outer").hasClass('more-date-outer')) {
    $(".date-outer").fadeTo('slow', 0, function () {
         $(this).addClass("more-date-outer").fadeTo('slow', 1);
    });
  }
});

演示：https://jsfiddle.net/rf7mudL5/8/

FadeIn 1000 when add class by Click

FadeIn 1000 when add class by Click

html

jquery

click

onclick