Question

我正在尝试创建一系列按下按钮时触发的滑动div。这个想法是每个div都有一个缩略图和一些与之相关的文本。点击左/右按钮后，div将相应地移动它们的位置。

我的代码可以在下面的jsfiddle中看到。我遇到了3个问题：

1）“transition：left 2s”规则不适用于第一个过渡效果，它适用于后续效果。

2）我想重复按下相应的按钮再次应用左属性值，这样我就可以重复滑动div。

3）我没有将“向右”按钮重新定位回“0”，而是将“左”属性重新定位为0，我希望将其向左移回与前一个属性值相反的方向。

基本上我正在尝试重新创建此侧的滑块。

http://www.euphoriumbakery.com/

非常感谢任何帮助或意见。

非常感谢你的帮助。

https://jsfiddle.net/kshatriiya/g709swLg/1/

window.onload = function() {



  $("#left").on("click", function() {


    $("#view").css("left", "-262px");


  });

  $("#right").on("click", function() {


    $("#view").css("left", "0px");


  });

}

#galwrapper {
  width: 650px;
  height: 400px;
  display: block;
  overflow: hidden;
}
#view {
  position: relative;
  width: 1423px;
  transition: left 2s;
}
.col-md {
  display: inline-block;
  margin-top: 100px;
  width: 18%;
}
.thumb img {
  opacity: 0.9;
  height: auto;
  width: auto;
  max-height: 150px;
  max-width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="galwrapper">
  <div id="view">

    <div class="col-md">
      <div class="thumb">
        <img class="img-rounded" src="http://netdna.walyou.netdna-cdn.com/wp-content/uploads/2010/09/retrocake1.jpg">
        <div class="caption">
          <h4>Retro Cake</h4>
        </div>
      </div>
    </div>

    <div class="col-md">
      <a href="#" class="thumb active">
        <img class="img-rounded" src="https://i.ytimg.com/vi/dh8ii5sbvyc/maxresdefault.jpg">
        <div class="caption">
          <h4>Strawberry Cake</h4>
        </div>
      </a>
    </div>

    <div class="col-md" id="mid">
      <a href="#" class="thumb">
        <img src="https://i.ytimg.com/vi/dh8ii5sbvyc/maxresdefault.jpg">
        <div class="caption">
          <h4>Retro Cake</h4>
        </div>
      </a>
    </div>

Answer 1

#view {
 position: relative;
 width: 1423px;
 left:0;
 transition: left 2s;
}

最初为ID为https://jsfiddle.net/81tqeof4/6/

的div制作left:0;

并且对于滑动效果获取当前左侧位置并更新position.check小提琴以获取示例

$("#left").on("click", function(){

    var leftPosition =  parseInt($("#view").position().left) - 256; 

     $("#view").css("left", -Math.abs(leftPosition));

 });

Answer 2

transition仅适用于现有属性

所以最初（在你的CSS中）你的left中没有#view属性。只有稍后点击，您的JavaScript才会添加left ，您的转换才会开始有效。

所以基本上你需要在你的JavaScript生效之前将left属性设置为CSS中的值并添加左边

#view {
  position: relative;
  width: 1423px;
  left: 0; //initiate
  transition: left 2s;
}

CSS转换持续时间不适用于第一个转换效果实例

2 个答案: