Question

我希望从div顺畅地显示display:none到display:block。我知道display:none无法完成，因此我首先尝试应用display:block然后执行转换，但这不起作用。

HTML

<input type="text" class="inp">
<div class="div"></div>

CSS

.div {
  display: none;
  visibility: hidden;
  opacity: 0;
  height: 100px;
  width: 100px;
  background: #000;
  transition: 2s;
}
.block {
  display:block;
}
.div-focused {
  visibility: visible;
  opacity: 1;
  transition: 2s;
}
.one {
  background: #ff0;
}

的jQuery *

$(document).ready(function() {
    $(".inp").on("keyup", function () {
       if ( !$(this).val() ) {
           $(".div").removeClass("one");
       }
       else {
           $(".div").addClass("block");
           $(".div").addClass("div-focused");
           $(".div").addClass("one");
       }
    });
});

以下是jsfiddle

Answer 1

$(document).ready(function() {
$(".inp").on("keyup", function () {
   if ( !$(this).val() ) {
       $(".div").removeClass("one");
   }
   else {
       $(".div").addClass("block");
         $(".div").addClass("one");
           $(".div").animate({opacity: "1"},500);
   }
  });
});

jsfiddle 试试这个

Answer 2

$(document).ready(function() {
 	$("div").hide();
    $(".inp").on("keyup", function () {
       if ( $(this).val()=="") {
           $("div").fadeOut(3000);
       } else {
        $("div").fadeIn(4000);
       }
    });
});

.div {
  height: 100px;
  width: 100px;
  background: red;
  transition: 2s;
}
.block {
  display:block;
}
.div-focused {
  visibility: visible;
  opacity: 1;
  transition: 2s;
}
.one {
  background: #ff0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp">
<div class="div"></div>

Answer 3

使用以下代码替换您的css和脚本。

/* style */
.div {
   display: none;
    height: 100px;
   width: 100px;
   background: #000;
 }


/* Script */

$(document).ready(function() {
   $(".inp").on("keyup", function () {
      if ( !$(this).val() ) {
        $(".div").css("opacity",0);
    }
    else {

       var item = $(this).val();
       var length = item.length;
       var opacity = length/10;
       $(".div").css("display","block");
       $(".div").css("opacity",opacity);
     }
   });
});

尝试dis：https://jsfiddle.net/priyaraj/ggqztzvh/

Answer 4

你问了一个黑客？ id是你的朋友。

当您请求此属性时，浏览器将强制进行页面重排，因此会添加类并且可以同步触发转换。

$( "#emial" ).html();

Element.offsetTop

$(document).ready(function() {
  $(".inp").on("keyup", function() {
    var $div = $('.div');
    if (!$(this).val()) {
      $div.removeClass("one");
    } else {
      $div.addClass("block");
      $div[0].offsetTop; // here is the magic
      $div.addClass("div-focused one");
    }
  });
});

在display上执行转换效果：none with hack

4 个答案: