jQuery在用新文本替换HTML文本时淡出HTML文本，而不是仅显示

jQuery fade out HTML text when replacing it with new text instead of just appearing

本文关键字：HTML 文本 显示 文本替换 jQuery 淡出      更新时间：2023-09-26

我有以下小脚本。。。

$(document).ready(function() {
    $('#search').bind('keyup', function(event) {
        if($('#search').val().length == '0') {
            $("#products").html("All Products");
        } else {
            $("#products").html("Searching Products");
        }
    });
});

当#search中有内容时，它会显示"正在搜索产品"，当为空时，它显示"所有产品"。我的问题是它变化很快，没有褪色效果，所以看起来有点波涛汹涌。我怎么能让它从一个渐变到另一个，无论它朝哪个方向（从空到打字或从打字到空）发展？

在这里为您的问题创建了一个JsBin

基本上更改了HTML结构，以容纳两个<h1>标签，这些标签根据需要隐藏和显示。

$(document).ready(function() {
    $('#search').bind('keyup', function(event) {
        if($('#search').val().length == '0') {
            $("#productsSearch").hide();
            $("#products").fadeIn(400);
        } else if($('#productsSearch').css('display') == 'none') {
            $("#products").hide();
          $("#productsSearch").fadeIn(400);
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search" type="text">
    <h1 id="products">All Products</h1>
    <h1 id="productsSearch" style="display:none;">Searching Products</h1>

尝试

$(document).ready(function() {
  var search = $("#search")
  , products = $("#products");
  search.bind('keyup', function(event) {
    if (search.val().length === 0 
       || search.val().split(/'s/).every(function(val) {
            return val === ""
          })) 
    {
        if (products.html() === "All Products") {
          return
        };
        products
        .stop(true, false)
        .html("All Products")
        .fadeOut(-1000)
        .fadeIn(1000);
    } else {
        if (search.val().length > 0 && products.html() === "Searching Products") {
          return
        };
        products
        .stop(true, false)
        .html("Searching Products")
        .fadeOut(-1000)
        .fadeIn(1000);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" id="search" />
<br />
<div id="products"></div>

jsFiddle Demo

我宁愿稍微重组一下你的元素，并使用css不透明度和过渡的交叉渐变。

$(document).ready(function() {
    $('#search').on('input',function(){
       var len = $('#search').val().length;
       var text = $(".productDisplay div:visible").text();
       if( len == 0 ){
           if( text == "All Products" ) return;
           $('.showAll').css('opacity',1);
           $('.searchProducts').css('opacity',0);
       }
       if( len > 0 ){
           if( text == "Searching Products" ) return;
           $('.searchProducts').css('opacity',1);
           $('.showAll').css('opacity',0);
       }
    });
});
.productDisplay{
    position:relative;
}
.productDisplay div{
    top:0;
    position:absolute;
    transition: all 1s;
}
.searchProducts{
    opacity:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search" type="text">
    <h1 id="products">
        <div class="productDisplay">
            <div class="showAll">All Products</div>
            <div class="searchProducts">Searching Products</div>
        </div>
    </h1>

隐藏然后使用jQuery淡入http://jsfiddle.net/kzs3trfr/36/

$(document).ready(function() {
    $('#search').on('keyup', function(event) {
        var length = $(this).val().length;
        console.log(length);
        if(length <= '0') {
            $("#products").hide().html("All Products").stop().fadeIn(400);
        } else if(length == '1' && $('#products').html() != 'Searching Products') {
            $("#products").hide().html("Searching Products").stop().fadeIn(400);
        }
    });
});

有点混乱的代码，但有效。

以下是具有确切效果并忽略任何类型空白的解决方案：

 $(document).ready(function() {
        $('#search').bind('keyup', function(event) {
            var search_val = $.trim( $('#search').val() ); //lets trim it as well
            if( search_val.length == '0' ) { 
                if( $("#products").html() == "All Products" ) return;
                $("#products").hide().html("All Products").fadeIn(400);
            } else {
                if( $("#products").html() == "Searching Products" ) return;
                $("#products").hide().html("Searching Products").fadeIn(400);
            }
        });
    });

这是Fiddle

相关文章：