Question

有没有办法在文本发生变化时淡入淡出？我使用的是jQuery的html（）函数。我试图用fadeOut（）来做，但现在它在fadeIn和fadeOut之间来回。

如果有更好的方法，请告诉我，如果宽度是一定的大小，浏览器的常量检查是否会比检测更糟？

https://jsfiddle.net/jzhang172/uhmubhtf/2/

＆＃13;

$(function(){
  function screenClass() {
  
  if ($( window ).width() <500){
$(".ok span").html("no");
}
else{
$(".ok span").fadeOut();
$(".ok span").fadeIn().html("yes");
}

  }
  $(window).bind('resize',function(){
  screenClass();
  });
  
  
  });

＆＃13;

.ok{
  background:blue;
  height:300px;
  width:300px;
  transition:1s;
  font-size:30px;
  color:white;
}
.span{
  color:white;
  font-size:30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"><span></span></div>

＆＃13;

Answer 1

我还不能发表评论...... 我克隆了你的小提琴并稍微更改了javascript代码。

https://jsfiddle.net/LoicMars/3gr8fnfn/

$(function() {
  yes = true;
  no = true;

  function screenClass() {
    if ($(window).width() < 500 && yes == true) {
      $(".ok span").fadeOut(function() {
        $(this).fadeIn().html("no");
        yes = false;
        no = true;
      });
    } else if ($(window).width() >= 500 && no == true) {
      $(".ok span").fadeOut(function() {
        $(this).fadeIn().html("yes");
        yes = true;
        no = false;
      });
    }
  }
  $(window).bind('resize', function() {
    screenClass();
  });
});

我添加了2个变量来防止调整大小时不断变化的眨眼效果。

用jQuery淡化文本

1 个答案: