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

jquery addclass之后的css转换

css-transitions jquery-animate jquery

Jimmy · 技术社区 · 8 年前

在用jquery添加活动类之后,我试图缓慢地扩展div,但我无法让它正常工作。 div只获取宽度,但不会发生转换。我也尝试过用jquery制作动画,但也没有成功。

$(document).ready(function() {
  $('.Sliders').click(function(e) {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

#SliderHolder {
  width: 100%;
  height: 100%;
  font-size: 0px;
  position: relative;
  display: table;
  border-collapse: collapse;
}

.Sliders {
  min-width: 50px;
  height: 100%;
  display: table-cell;
  box-sizing: border-box;
  vertical-align: top;
  font-size: 72px;
  text-align: center;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.active {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Wrapper">
  <div id="SliderHolder">
    <div id="Slide1" class="Sliders active"></div>
    <div id="Slide2" class="Sliders"></div>
    <div id="Slide3" class="Sliders"></div>
    <div id="Slide4" class="Sliders"></div>
  </div>
</div>

1 回复 | 直到 8 年前

Mohamed-Yousef 8 年前

您可以添加 width : 0%; 到 .Sliders 设置样式并将过渡添加到 .active 班

$(document).ready(function() {
  $('.Sliders').click(function(e) {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

#SliderHolder {
  width: 100%;
  height: 100%;
  font-size: 0px;
  position: relative;
  display: table;
  border-collapse: collapse;
}

.Sliders {
  width : 0%;
  min-width: 50px;
  height: 100%;
  display: table-cell;
  box-sizing: border-box;
  vertical-align: top;
  font-size: 72px;
  text-align: center;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.active {
  width: 100%;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  background : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Wrapper">
  <div id="SliderHolder">
    <div id="Slide1" class="Sliders active">1</div>
    <div id="Slide2" class="Sliders">2</div>
    <div id="Slide3" class="Sliders">3</div>
    <div id="Slide4" class="Sliders">4</div>
  </div>
</div>

推荐文章

Luckkks · 过渡色工作不正常

1 年前

BogisW · CSS动画按钮/悬停时为span内容文本添加CSS转换

2 年前

markisawesome4 · 按钮:当您将鼠标移离按钮时,悬停时显示的内容下移后

2 年前

Bruno Oliveira · 如何在CSS转换完成后调用函数-React

3 年前

Ancross · 为什么我的小CSS动画不会触发?

4 年前

Jorge · :before和:after伪元素以接收过渡效果

8 年前

Arsalan Khattak · 线性渐变过渡

8 年前

Albert qerimi · 将鼠标悬停在具有CSS变换比例的div上后添加动画

8 年前

Paul · 悬停时变换比例不缩放

8 年前

Willem van der Veen · CSS转换结合JS clickEvent

8 年前