2

我在溢出属性中给出了 4s 的转换，但它不起作用。我正在使用 css 和 jquery 创建“显示更多”、“显示更少”。现在，当我单击显示更多时，overflow:visible正在显示但没有任何过渡。

CSS：

$("#more").click(function() {
	$(".a").css("overflow","visible");
	$(".a").css("-webkit-transition","height 4s");
	$(".a").css("transition","height 4s");
	$("#less").show();
	$("#more").hide();
}); 
        						
$("#less").click(function() {
	$(".b").css("overflow","hidden");
	$("#more").show();
	$("#less").hide();
});
    .a {
    	position: relative;
    	padding: 20px;
    	border: 1px solid black;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    	max-height: 387px;
    	overflow: hidden;
    }
    
    .b {
    	position: relative;
    	min-height: 50px;
    	border: 1px solid #aaa;
    	margin-bottom: 2px;
    	padding: 10px;
    	-webkit-box-sizing: border-box;
    	        box-sizing: border-box;
    	text-align: center;
    	overflow: hidden;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    	</div>
    	<p id="more">See More</p>
    	<p id="less">See Less</p>

你们能帮帮我吗？

4

3 回答 3

2

尝试将动画应用于 maxHeight 而不是溢出。

$("#more").click(function() {
  $(".a").animate({
    maxHeight: "600px"
  }, 4000);
  $("#less").show();
  $("#more").hide();
});

$("#less").click(function() {
  $(".a").animate({
    maxHeight: "387px"
  }, 4000);
  $("#more").show();
  $("#less").hide();
});
.a {
  position: relative;
  padding: 20px;
  border: 1px solid black;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-height: 387px;
  overflow: hidden;
}

.b {
  position: relative;
  min-height: 50px;
  border: 1px solid #aaa;
  margin-bottom: 2px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>
<p id="more">See More</p>
<p id="less">See Less</p>

showLess();

$("#more").click(function() {

  $(".a .b").removeAttr("style");

  $("#less").show();
  $("#more").hide();
});

$("#less").click(function() {
  showLess();
  $("#more").show();
  $("#less").hide();
});

function showLess() {
  var len = $(".a .b").length;

  for (var i = 5; i < len; i++) {
    $($(".a .b")[i]).css({
      "font-size": 0,
      padding: 0,
      border: 0,
      height: 0,
      width: 0,
      "min-height": 0
    });
  }
}
.a {
  position: relative;
  padding: 20px;
  border: 1px solid black;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.b {
  position: relative;
  min-height: 50px;
  border: 1px solid #aaa;
  margin-bottom: 2px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  transition: all 2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>
<p id="more">See More</p>
<p id="less">See Less</p>

于 2018-06-17T10:32:11.943 回答
0

使用max-height而不是overflow这样：

1) 最佳方式：

$("#more").click(function() {
    $('.a').toggleClass('collapse');
    var name = ($(this).text() =='See More') ? 'See Less' : 'See More';
    $(this).text(name);
})


$("#more").click(function() {
	$('.a').toggleClass('collapse');
	var name = ($(this).text() =='See More') ? 'See Less' : 'See More';
	$(this).text(name);
})
.a {
  position: relative;
  padding: 20px;
  border: 1px solid black;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-height: 387px;
  overflow: hidden;
  -webkit-transition: max-height 4s;
  -moz-transition: max-height 4s;
  -ms-transition: max-height 4s;
  -o-transition: max-height 4s;
  transition: max-height 4s;
}

.b {
  position: relative;
  min-height: 50px;
  border: 1px solid #aaa;
  margin-bottom: 2px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

.collapse {
	max-height: 550px;	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>
<p id="more">See More</p>

2）修正你的方式：

$("#more").click(function() {

  $(".a").css({
    WebkitTransition : 'max-height 4s ease-in-out',
    MozTransition    : 'max-height 4s ease-in-out',
    MsTransition     : 'max-height 4s ease-in-out',
    OTransition      : 'max-height 4s ease-in-out',
    transition       : 'max-height 4s ease-in-out',
    'max-height':"550px"
  });
  $("#less").show();
  $("#more").hide();

}); 


$("#less").click(function() {
  $(".a").css("max-height","387px");
  $("#more").show();
  $("#less").hide();
});


$("#more").click(function() {
                           
  $(".a").css({
    WebkitTransition : 'max-height 4s ease-in-out',
    MozTransition    : 'max-height 4s ease-in-out',
    MsTransition     : 'max-height 4s ease-in-out',
    OTransition      : 'max-height 4s ease-in-out',
    transition       : 'max-height 4s ease-in-out',
    'max-height':"550px"
  });
  $("#less").show();
  $("#more").hide();
}); 


$("#less").click(function() {
  $(".a").css("max-height","387px");
  $("#more").show();
  $("#less").hide();
});
.a {
  position: relative;
  padding: 20px;
  border: 1px solid black;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-height: 387px;
  overflow: hidden;
}

.b {
  position: relative;
  min-height: 50px;
  border: 1px solid #aaa;
  margin-bottom: 2px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>
<p id="more">See More</p>
<p id="less">See Less</p>

于 2018-06-17T10:32:50.110 回答
-1

你在干什么。您想要转换高度并且您正在使用 .show() 方法。为了让 height 属性生效，必须更改高度值，但 .show() 只会更改显示。您应该使用按钮或锚标记，然后使用 .css() 设置 height 属性以使其具有向下滑动的效果。

<style>
    .box {
        height: 20px;
        transition: height ease .4s;
        -webkit-transition: height ease .4s;
        .......
    }
</style>

<div class="box">
    <div class="contents">
        .........
    </div>
</div>
<a href="#" class="toggle-more">Show more</a>

<script>
    $(".toggle-more").click(function() {
        ($(this).html() === "Show more") && $(".box").css("height", "60px").html("Show less");
        ($(this).html() === "Show less") && $(".box").css("height", "20px").html("Show more");
    });
</script>
于 2018-06-17T10:55:18.413 回答