代码之家 › 专栏 › 技术社区 › jsPlayer

Jquery$toggle(“慢”)显示闪烁/卡住的行为?

css-animations css jquery javascript

-1

jsPlayer · 技术社区 · 6 年前

.toggle('slow')转换的行为很奇怪,它在隐藏和显示之前会闪烁,这可能是由于我的代码的设置方式,可能效率不高。

全部详细信息

.product-promotion-display {
    background: linear-gradient(90deg, #d4272e 50%, #fff 50%);
    overflow: hidden;
    transition: height 1s ease;
  }
  .product-promotion-display ._see-more-li {
    list-style: none;
    cursor: pointer;
    text-decoration: underline;

  }

<html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
	 crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
	 crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
	 crossorigin="anonymous"></script>


</head>

<body>

  <div class="product-promotion-display border">

    <div class="container">

      <div class="row pt-5">
        <div class="col-sm text-white pb-3">
          <h1 class="pb-4">Cable Tray - FTE FRP</h1>
          <P class="pb-2">Ideal
            Ideal for applications that require high strength in high corrosion resistance. The tray system has 2
            types: 50
            and 80 mm heights that are extremely ï¬exible. </P>
          <h5 class="pb-1">Advantages:</h5>
          <ul class=" pl-0">
            <li class="pb-2 ml-5">
              Easy to cut
            </li>
            <li class="pb-2 ml-5">
              No hot work permit required
            </li>
            <li class="pb-2 ml-5">
              Simple hand tools used for cutting and drilling
            </li>
            <li class="pb-2 ml-5">
              FRP oï¬ers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP oï¬ers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP oï¬ers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP oï¬ers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP oï¬ers a Long Life Cycle
            </li>
            <li class="pb-2 ml-5">
              FRP oï¬ers a Long Life Cycle
            </li>
          </ul>


          <div class="btn-group pt-2 pb-5">
            <button type="button" class="btn btn-outline-light mr-5">Request A Quote</button>
            <button type="button" class="btn btn-outline-light">Shop Online</button>
          </div>
        </div>

        <div class="col-sm ppd-img-div align-self-center">
          <img src="./images/toolbox.png" alt="there was an image" class="img-fluid">
        </div>
      </div>


    </div>

  </div>


  <script type="text/javascript">
    $(document).ready(function () {
      $('ul').each(function () {
        var max = 4
        if ($(this).find('li').length > max) {
          $(this).find('li:gt(' + max + ')').hide().end().append('<li class="_see-more-li pl-0 ml-0 pt-3"><h5 class="_see-more-text">Read More</h5></li>');
          $('._see-more-li').click(function () {
            $(this).siblings(':gt(' + max + ')').toggle('slow');
            if ($('._see-more-text').length) {
              $(this).html('<h5 class="show_less">Read Less</h5>');
            } else {
              $(this).html('<h5 class="_see-more-text">Read More</h5>');
            };
          });
        };
      });


    })
  </script>


</body>

</html>

1 回复 | 直到 6 年前

Art3mix 6 年前

这是因为您将列表项设置为display:none,当您显示none时,它将隐藏整个项,因此当您要显示它时,它将首先显示所有项(填充),然后开始实际文本的转换。