Question

在此https://jsfiddle.net/8oguLv0d/上有红色和绿色框。如果有人点击“点击我”。按钮，然后红色框用fQuery中的 fadeOut 方法淡出，绿色框跳到新位置。

我希望绿色框能够顺利移动到新位置。我怎样才能做到这一点？我试图为他们提供CSS过渡选项

-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;

但是jQuery fadeOut方法不再适用了。

以下是 jsfiddle 代码：

HTML

<div id="clickme">Click me</div>
<ul>
    <li><div class='a'></div></li>
    <li><div class='a'></div></li>
    <li><div class='a'></div></li>
    <li><div class='b'></div></li>
    <li><div class='a'></div></li>
    <li><div class='a'></div></li>
    <li><div class='b'></div></li>
    <li><div class='a'></div></li>
    <li><div class='a'></div></li>
    <li><div class='a'></div></li>
    <li><div class='b'></div></li>
    <li><div class='a'></div></li>
    <li><div class='b'></div></li>
</ul>

Jquery的

$(document).ready(function(){
    $("#clickme").click(function(){
    $('.a').fadeOut(1000);
                });
   });

CSS

  li{
        list-style-type: none;

        float: left;
    }

    li div{
        margin: 20px;
        height: 100px;
        width: 100px;
    }

    li div.a{
        background-color: red;
    }

    li div.b{
        background-color: green;
    }

    #clickme{
      background-color: blue;
      text-align: center;
      color: #FFF;
      cursor: pointer;
     }
    }

Answer 1

您可以在fadeOut之后添加转换为红色元素的类。

  $("#clickme").click(function(){
    $('.a').fadeOut(1000, function() {
        $('.a').addClass('hide');
    });
  });

并设置过渡到这些元素：

li div.a.hide{
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;

      opacity: 0;
      display: block !important;
      margin-top: 0;
      margin-bottom: 0;
      height: 0;

    }

您仍然会遇到浮动问题。您应该将此列表制作为例如4个带浮动的元素，并在其中插入您的框。然后整个动画应该没问题。

这是小提琴：https://jsfiddle.net/x6th74xr/

将布局更改为4个li元素

    <ul>
      <li>
        <div class='a'></div>
        <div class='a'></div>
        <div class='b'></div>
      </li>
      <li>
        <div class='a'></div>
        <div class='b'></div>
        <div class='a'></div>
      </li>
      <li>
        <div class='b'></div>
        <div class='a'></div>
        <div class='a'></div>
      </li>
      <li>
        <div class='a'></div>
        <div class='a'></div>
        <div class='a'></div>
      </li>
    </ul>

并为这一变化提供帮助：https://jsfiddle.net/htaexnn6/

Answer 2

您可以尝试使用jQuery并将fadeOut持续时间设置为优于.b类的延迟：

    $("#clickme").click(function(){
        $('.a').fadeOut();
        $('.b').delay(1000).fadeIn();
    });

要实现这一点，你需要在调用下一个转换之前完成fadeOut（）（即 fadeIn（） .b类）。

在此处查看：https://jsfiddle.net/liototo/8oguLv0d/1/

Answer 3

JQuery - 只需切换课程

$(document).ready(function(){
  $("#clickme").click(function(){
  $('div').toggleClass('a');
  });
});

CSS - 检查＆＃34;使用＆＃39; a＆＃39;类＆＃34;和＆＃34;没有＆＃39; a＆＃39;类＆＃34;

li {
  list-style-type: none;
  float: left;
}

li div {
  margin: 20px 0;
  height: 100px;
  width: 0px;
  opacity: 0;
  background-color: red;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

li div.a {
  opacity: 1.0;
  margin: 20px;
  width: 100px;
}

li div.b {
  opacity: 1.0;
  margin: 20px;
  width: 100px;
  background-color: green;
}

#clickme {
  background-color: blue;
  text-align: center;
  color: #FFF;
  cursor: pointer;
}

在jquery fadeOut之后进行CSS转换

3 个答案: