Question

我在按Click功能添加课程时尝试fadeIn 1000。

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次而不显示不透明度：0到1或没有css，表示fadeIn内容1次单击时。有什么建议吗？

Answer 1

<强> CSS：

transition-duration: 1s;

修改不透明度fadein：http://jsfiddle.net/rf7mudL5/9/

Answer 2

如果元素不可见，

.fadeIn()只会淡化元素。为您的颜色添加动画最简单的方法是更改文本的转换持续时间：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

<强>更新

如果你想在点击按钮时淡化文本一次，你只需先将其隐藏然后淡入。

请注意：

持续时间不应该在引号中。
你需要检查文本是否还有新课程，并且只有在它还没有的情况下才会淡化它。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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);
    });
  }
});

DEMO：https://jsfiddle.net/rf7mudL5/8/

通过Click添加类时FadeIn 1000

3 个答案: