Question

我尝试通过单击容器内的项目，容器向右/向左滑动并淡出来执行效果，在内容淡出后，需要显示隐藏以为新内容创建位置。

将来的标题将放在容器外部，因此标题不会淡出。我试过的任何东西似乎都没有用。有人对这个问题有什么建议吗？

我将在我的网站www.bartmulder.nl/beta1.0上实施此效果，因此当您点击照片时，所有照片的容器将在显示之前淡出并滑动

＆＃13;

// change .box1 to .container and you will see the effect that i am looking for
$('.box1').on('click', function() {
  $(this).toggleClass('clicked');

  setTimeout(function() {
    document.getElementById("containerWerk").style.display = "none";
  }, 500);
});

＆＃13;

.container {
  -webkit-transition: 0.5s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}

.box img {
  margin: 0px auto;
  cursor: pointer;
}

.container.clicked {
  margin-left: -100px;
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
  <div class="box1">
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
  </div>
  <div class="box2">
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
  </div>

＆＃13;

Answer 1

您必须申请该课程并点击＆＃39;在父元素＆＃39; .container＆＃39;中，不在＆＃39; this＆＃39;中，因此请使用jQuery父级访问父元素＆＃39; .container＆＃39;将单击的类添加到正确的元素中。

＆＃13;

// change .box1 to .container and you will see the effect that i am looking for
$('.box1').on('click', function() {
  $(this).parent('.container').toggleClass('clicked');

  setTimeout(function() {
    document.getElementById("containerWerk").style.display = "none";
  }, 500);
});

＆＃13;

.container {
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
  opacity: 1;
  margin-left:0;
  position: relative;
}

.box img {
  margin: 0px auto;
  cursor: pointer;
}

.container.clicked {
  margin-left: -100px;
  opacity: 0;
  transition: all ease .5s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
  <div class="box1">
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
  </div>
  <div class="box2">
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
  </div>

＆＃13;

如果您只想将图像转到另一侧

＆＃13;

// change .box1 to .container and you will see the effect that i am looking for
$('.box').on('click', function() {
  $(this).toggleClass('clicked');

  setTimeout(function() {
    $(this).css('display','none');
  }, 500);
});

＆＃13;

.container {
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
  opacity: 1;
  margin-left:0;
  position: relative;
}

.box img {
  margin: 0px auto;
  cursor: pointer;
  transition: all ease .5s;
  opacity: 1;
  margin-left:0;
  position: relative;
}

.box.clicked {
  margin-left: -100px;
  opacity: 0;
  transition: all ease .5s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
  <div class="box box1">
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
  </div>
  <div class="box box2">
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
  </div>

＆＃13;

Answer 2

这里也是实现这个目标的jQuery / JavaScript方式...... 只需在元素上调用animate并指定动画，速度和完成功能的类型（可选）。

对于下面的示例，我传递一个JSON对象来指定动画（我从CSS中删除）要完成的操作，然后在动画之后它将触发元素不再显示。

＆＃13;

// change .box1 to .container and you will see the effect that i am looking for
$('.box').on('click', function() {
  $(this).animate({
     opacity: 0,
     marginLeft: -100
  }, 1000, function() {
    $(this).css("display", "none");
  });
});

＆＃13;

.box img {
  margin: 0px auto;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
  <div class="box box1">
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
  </div>
  <div class="box box2">
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
  </div>

＆＃13;

当我点击容器中的项目

2 个答案: