动画或转换在溢出属性

时间：2018-06-17 10:08:53

标签： jquery css

我在溢出属性中提供了4的转换但它不起作用。我使用css和jquery创建“show more”，“show less”。现在，当我点击显示更多时，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>

你们可以帮助我吗？

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

使用max-height代替overflow，如下所示：

1）最佳方式：

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

＆＃13;
＆＃13; 
$("#more").click(function() {
	$('.a').toggleClass('collapse');
	var name = ($(this).text() =='See More') ? 'See Less' : 'See More';
	$(this).text(name);
})
＆＃13; 
.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;	
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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();
});

＆＃13;
＆＃13; 
$("#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();
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-1)

你在做什么您想要转换高度，并且您正在使用.show（）方法。要转换为高度属性的工作，高度值必须更改，但.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>
相关问题
最新问题