Question

在我的网站中，我在向下箭头和向下箭头之间切换。和向上箭头。见这里：http://jsfiddle.net/4uLghzg7/

有没有办法点击时可以添加轻微的动画过渡？所以它在两个图标之间淡入/淡出？

function close_accordion_section(source) {
    $(source).parent().find('.accordion-section-title').removeClass('active');
    $(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}

$('.accordion-section-title').click(function (e) {
    if ($(e.target).is('.active')) {
        close_accordion_section(e.target);
    } else {
        $(this).addClass('active');
        $(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
    }

    e.preventDefault();
});

.accordion {
    overflow: hidden;
    margin-bottom: 40px;
}
.accordion-section {
    padding: 15px;
    border: 1px solid #d8d8d8;
    background: #fbfbfb;
}
.accordion-section-title {
    width: 100%;
    display: inline-block;
    background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
    background-size: 5% 100%;
    background-repeat: no-repeat;
    background-position: top right;
}
.accordion-section-title.active {

  background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat;
     background-size: 5% 100%;
    background-repeat: no-repeat;
}
.accordion-section-title.active, .accordion-section-title:hover {
    text-decoration: none;
    transition: color 0.1s linear;
}
.accordion-section-content {
    padding: 15px 0;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
    <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a>

        <div id="accordion-1" class="accordion-section-content">
            <p>Text.</p>
            <p>
        </div>
    </div>
</div>

Answer 1

你需要一个特殊的技巧来淡化背景图像，你需要两个元素，淡化内部元素opacity：

<div id="arrowUp">
    <div id="arrowDown">
    </div>
</div>

代码演示（修改）：

＆＃13;

function close_accordion_section(source) {
  $(source).parent().find('.arrowDown').removeClass('active');
  $(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}

$('.accordion-section-title').click(function(e) {
  if ($('.arrowDown').is('.active')) {
    close_accordion_section(e.target);
  } else {
    $('.arrowDown').addClass('active');
    $(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
  }

  e.preventDefault();
});

＆＃13;

.accordion {
  overflow: hidden;
  margin-bottom: 40px;
}
.accordion-section {
  padding: 15px;
  border: 1px solid #d8d8d8;
  background: #fbfbfb;
}
.arrowUp {
  width: 20px;
  height: 20px;
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.arrowDown {
  opacity: 0;
  width: 20px;
  height: 20px;
  background-color: white;
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png");
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.arrowDown.active {
  opacity: 1;
  background-position: center center;
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.accordion-section-title.active,
.accordion-section-title:hover {
  text-decoration: none;
  transition: color 0.1s linear;
}
.accordion-section-content {
  padding: 15px 0;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">More information</a>

    <div class="arrowUp" style="float: right">
      <div class="arrowDown">
      </div>
    </div>

    <div id="accordion-1" class="accordion-section-content">
      <p>Text.</p>
      <p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

只需在

中编写.click函数

$(function() {
});

试试这个..

$(function() {
    $('.accordion-section-title').click(function (e) {
         e.preventDefault();
        if ($(e.target).is('.active')) {
            close_accordion_section(e.target);
        } else {
            $(this).addClass('active');
            $(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
        }
    });
});

Answer 3

您可以将箭头更改为实际元素（以下示例中的伪元素）并将它们放在彼此的顶部。然后在向上箭头上方向下淡入淡出箭头以创建您正在寻找的效果。

 // up arrow positioned absolutely
.accordion-section-title:before {
    content: '';
    position: absolute;
}

 // down arrow positioned absolutely
.accordion-section-title:after {
    content: '';
    opacity: 0;
    transition: opacity 0.2s ease;
    position: absolute;
}

 // animate in down arrow
.accordion-section-title:after {
    content: '';
    opacity: 1;
    position: absolute;
}

jsfiddle工作示例：http://jsfiddle.net/4uLghzg7/6/

希望这可以回答你的要求。

CSS背景图像之间的转换

3 个答案: