文章/答案/技术大牛

发布

社区首页 >问答首页 >只有在调用console.log(...css("left"))；时，Jquery + css转换才能正常工作

问只有在调用console.log(...css("left"))；时，Jquery + css转换才能正常工作
EN

Stack Overflow用户

提问于 2015-03-13 03:36:28

回答 2查看 66关注 0票数 1

我使用Jquery，Javascript制作了一个旋转木马，并使用CSS处理每一项的过渡，但只有在条件语句后面添加console.log($tipToAnimate.css("left:));以分配方向时，滑动方向才能正确工作。一开始我认为这可能是启动太快的问题，所以我在添加.current类(它控制幻灯片的显示时间)之前添加了一个超时，但这并没有产生行为上的变化。我使用类来处理所有这些问题，然后使用Jquery来设置CSS，但这也产生了相同的行为。

这就是我所拥有的：

var TIPS = TIPS || {};

TIPS.animateTips = function(arrow) {
  var $arrow = $(arrow.target),
      direction = $arrow.data("direction"),
      $tip = $arrow.parent();

  animateTip($tip, direction);
};

function animateIn(self, direction) {

  if (direction == "left") {
    var $tipToAnimate = self.prev(); // find previous tip if going left
  } else if (direction == "right") {
    var $tipToAnimate = self.next(); // find next tip if going right
  }

  if ($tipToAnimate.length == 0) { // if there is no previous or next tip
    if (direction == "left") {
      $tipToAnimate = $(self).nextAll(".tip").last(); // find last tip if on first tip
    } else if (direction == "right") {
      $tipToAnimate = $(self).prevAll(".tip").last(); // find first tip if on last
    }
  }

  positionTip($tipToAnimate, direction); //this is the function that defines left
  revealTip($tipToAnimate, direction);
  $tipToAnimate.addClass("current");
}

function animateOut(self, direction) {
  self.addClass("exiting");

  if (direction == "left") {
    self.css("left", "-1400px");
  } else if (direction == "right") {
    self.css("left", "1300px");
  }

  self.removeClass("current");

  $(".exiting").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    $(this).css("left", "");
    $(this).addClass("hidden").removeClass("exiting");
    $(this).off("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
  });
}

function animateTip(self, direction) {
  animateOut(self, direction);
  animateIn(self, direction);
}

function loadCarousel() {
  $(".tip:not(.current)").addClass("hidden");
}

function positionTip(self, direction){
  if (direction == "left") {
    $(self).css("left", "1400px");
  } else if (direction == "right") {
    $(self).css("left", "-1400px");
  }
  console.log($(self).css("left")); // if this is removed, the carousel uses the css class "hidden" as the left value, even though it's being defined here
}

function revealTip(self, direction) {
  $(self).removeClass("hidden");
  $(self).css("left", "");
}

$(document).ready(function(){
  $(".arrow").bind("click", TIPS.animateTips);

  loadCarousel();
});

ul {
  list-style-type: none;
}

.pages-resource_prototype .tip {
  background: #ffffff;
  bottom: 0;
  max-width: 550px;
  padding: 2em;
  position: absolute;
  top: 0;
  width: 100%;
}

.pages-resource_prototype .tip.current {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
@media screen and (min-width: 48.75em) {

  .pages-resource_prototype .tip.current {
    left: 2.5em;
  }
}

.pages-resource_prototype .tip.hidden {
  left: -1400px;
}

.pages-resource_prototype .tip.exiting {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.pages-resource_prototype .tip-content .subtitle {
  color: #5d57a2;
}

.pages-resource_prototype .tip-number {
  color: #999;
  font-size: 0.9em;
  margin-bottom: 1.5em;
}

.pages-resource_prototype .tips {
  background: #48C1C9;
}

.pages-resource_prototype .tips-list {
  min-height: 35em;
  overflow: hidden;
  position: relative;
  width: 90%;
}
@media screen and (min-width: 48.75em) {

  .pages-resource_prototype .tips-list {
    width: auto;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class= "pages-resource_prototype">
<section class='tips'>
          <ul class='tips-list'>
            <li class='tip tip-0 current'>
              <div class='tip-number'>
                1
                of
                4
              </div>
              <div class='left-arrow arrow' data-direction='left'>
                <
              </div>
              <div class='right-arrow arrow' data-direction='right'>
                >
              </div>
              <div class='tip-content'>
                <h2>
                  Tip Name
                </h2>
                <p class='subtitle'>
                  Tip Type
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                  est laborum
                </p>
                <a class="appreciate" href="#appreciate"><i class='fa fa-heart'></i>
                <div class='prompt'>
                  Appreciate?
                </div>
                </a>
                <a class="download-tips" href="/">Download all tips</a>
              </div>
            </li>
            <li class='tip tip-1 '>
              <div class='tip-number'>
                2
                of
                4
              </div>
              <div class='left-arrow arrow' data-direction='left'>
                <
              </div>
              <div class='right-arrow arrow' data-direction='right'>
                >
              </div>
              <div class='tip-content'>
                <h2>
                  Tip Name
                </h2>
                <p class='subtitle'>
                  Tip Type
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                  est laborum
                </p>
                <a class="appreciate" href="#appreciate"><i class='fa fa-heart'></i>
                <div class='prompt'>
                  Appreciate?
                </div>
                </a>
                <a class="download-tips" href="/">Download all tips</a>
              </div>
            </li>
            <li class='tip tip-2 '>
              <div class='tip-number'>
                3
                of
                4
              </div>
              <div class='left-arrow arrow' data-direction='left'>
                <
              </div>
              <div class='right-arrow arrow' data-direction='right'>
                >
              </div>
              <div class='tip-content'>
                <h2>
                  Tip Name
                </h2>
                <p class='subtitle'>
                  Tip Type
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                  est laborum
                </p>
                <a class="appreciate" href="#appreciate"><i class='fa fa-heart'></i>
                <div class='prompt'>
                  Appreciate?
                </div>
                </a>
                <a class="download-tips" href="/">Download all tips</a>
              </div>
            </li>
            <li class='tip tip-3 '>
              <div class='tip-number'>
                4
                of
                4
              </div>
              <div class='left-arrow arrow' data-direction='left'>
                <
              </div>
              <div class='right-arrow arrow' data-direction='right'>
                >
              </div>
              <div class='tip-content'>
                <h2>
                  Tip Name
                </h2>
                <p class='subtitle'>
                  Tip Type
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                  est laborum
                </p>
                <a class="appreciate" href="#appreciate"><i class='fa fa-heart'></i>
                <div class='prompt'>
                  Appreciate?
                </div>
                </a>
                <a class="download-tips" href="/">Download all tips</a>
              </div>
            </li>
          </ul>
        </section>
  </div>

javascript

jquery

回答 2

Stack Overflow用户

发布于 2015-03-13 03:53:01

我已经很接近了。从本质上讲，你有点混淆了你处理动画的方式。

如果要制作CSS动画，则应将动画样式分配给元素的基样式，然后使用类调整其动画属性。示例：

.element-that-animates {
    transition: left 0.4s ease-in;
}

.element-that-animates.animate {
    left: 50px;
}

我认为这需要的不仅仅是一个current和hidden类，而是一个current、left或right类。left和right类应将下一个或上一个元素定位在当前元素的左侧或右侧，并且在单击按钮时，应为当前元素提供left或right类以将其移出页面，而以前具有left或right类的元素现在将被赋予类current。

它仍然很乱，但它会起作用的。

var TIPS = TIPS || {};

TIPS.animateTips = function(arrow) {
  var $arrow = $(arrow.target),
      direction = $arrow.data("direction"),
      $tip = $arrow.parent();

  animateTip($tip, direction);
};

function animateIn(self, direction) {

  if (direction == "left") {
    var $tipToAnimate = self.prev(); // find previous tip if going left
  } else if (direction == "right") {
    var $tipToAnimate = self.next(); // find next tip if going right
  }

  if ($tipToAnimate.length == 0) { // if there is no previous or next tip
    if (direction == "left") {
      $tipToAnimate = $(self).nextAll(".tip").last(); // find last tip if on first tip
    } else if (direction == "right") {
      $tipToAnimate = $(self).prevAll(".tip").last(); // find first tip if on last
    }
  }

  positionTip($tipToAnimate, direction); //this is the function that defines left
  revealTip($tipToAnimate, direction);
  $tipToAnimate.addClass("current");
}

function animateOut(self, direction) {
  self.removeClass('current').addClass('hidden');
}

function animateTip(self, direction) {
  animateOut(self, direction);
  animateIn(self, direction);
}

function loadCarousel() {
  $(".tip:not(.current)").addClass("hidden");
}

function positionTip(self, direction){
  //console.log($(self).css("left")); // if this is removed, the carousel uses the css class "hidden" as the left value, even though it's being defined here
}

function revealTip(self, direction) {
  $(self).removeClass("hidden");
  $(self).css("left", "");
}

$(document).ready(function(){
  $(".arrow").bind("click", TIPS.animateTips);

  loadCarousel();
});

ul {
  list-style-type: none;
}

.pages-resource_prototype .tip {
  background: #ffffff;
  bottom: 0;
  max-width: 550px;
  padding: 2em;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-transition: left 0.4s ease;
  -moz-transition: left 0.4s ease;
  transition: left 0.4s ease;
}

  .pages-resource_prototype .tip.current {
    left: 2.5em;
  }

.pages-resource_prototype .tip.hidden {
  left: -1400px;
}

.page-resource_prototype .tip.current + .tip {
  left: 1400px;
}

.pages-resource_prototype .tip-content .subtitle {
  color: #5d57a2;
}

.pages-resource_prototype .tip-number {
  color: #999;
  font-size: 0.9em;
  margin-bottom: 1.5em;
}

.pages-resource_prototype .tips {
  background: #48C1C9;
}

.pages-resource_prototype .tips-list {
  min-height: 35em;
  overflow: hidden;
  position: relative;
  width: 90%;
}
@media screen and (min-width: 48.75em) {

  .pages-resource_prototype .tips-list {
    width: auto;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class= "pages-resource_prototype">
<section class='tips'>
          <ul class='tips-list'>
            <li class='tip tip-0 current'>
              <div class='tip-number'>
                1
                of
                4
              </div>
              <div class='left-arrow arrow' data-direction='left'>
                <
              </div>
              <div class='right-arrow arrow' data-direction='right'>
                >
              </div>
              <div class='tip-content'>
                <h2>
                  Tip Name
                </h2>
                <p class='subtitle'>
                  Tip Type
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                  est laborum
                </p>
                <a class="appreciate" href="#appreciate"><i class='fa fa-heart'></i>
                <div class='prompt'>
                  Appreciate?
                </div>
                </a>
                <a class="download-tips" href="/">Download all tips</a>
              </div>
            </li>
            <li class='tip tip-1 '>
              <div class='tip-number'>
                2
                of
                4
              </div>
              <div class='left-arrow arrow' data-direction='left'>
                <
              </div>
              <div class='right-arrow arrow' data-direction='right'>
                >
              </div>
              <div class='tip-content'>
                <h2>
                  Tip Name
                </h2>
                <p class='subtitle'>
                  Tip Type
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                  est laborum
                </p>
                <a class="appreciate" href="#appreciate"><i class='fa fa-heart'></i>
                <div class='prompt'>
                  Appreciate?
                </div>
                </a>
                <a class="download-tips" href="/">Download all tips</a>
              </div>
            </li>
            <li class='tip tip-2 '>
              <div class='tip-number'>
                3
                of
                4
              </div>
              <div class='left-arrow arrow' data-direction='left'>
                <
              </div>
              <div class='right-arrow arrow' data-direction='right'>
                >
              </div>
              <div class='tip-content'>
                <h2>
                  Tip Name
                </h2>
                <p class='subtitle'>
                  Tip Type
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                  est laborum
                </p>
                <a class="appreciate" href="#appreciate"><i class='fa fa-heart'></i>
                <div class='prompt'>
                  Appreciate?
                </div>
                </a>
                <a class="download-tips" href="/">Download all tips</a>
              </div>
            </li>
            <li class='tip tip-3 '>
              <div class='tip-number'>
                4
                of
                4
              </div>
              <div class='left-arrow arrow' data-direction='left'>
                <
              </div>
              <div class='right-arrow arrow' data-direction='right'>
                >
              </div>
              <div class='tip-content'>
                <h2>
                  Tip Name
                </h2>
                <p class='subtitle'>
                  Tip Type
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
                  est laborum
                </p>
                <a class="appreciate" href="#appreciate"><i class='fa fa-heart'></i>
                <div class='prompt'>
                  Appreciate?
                </div>
                </a>
                <a class="download-tips" href="/">Download all tips</a>
              </div>
            </li>
          </ul>
        </section>
  </div>

票数 1

Stack Overflow用户

发布于 2015-03-13 04:18:39

事实证明，setTimeout函数可以解决这个问题。如果我在调用revealTip函数时添加了100ms的超时(在positionTip函数被调用之后)，轮播就会按预期运行。我认为这是因为console.log延迟了动画的执行，从而使其能够运行。

如果任何人有关于如何避免在这里使用setTimeout的反馈，我很想听听。使用setTimeout感觉有点凌乱。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29018770

复制

相似问题

问只有在调用console.log(...css("left"))；时，Jquery + css转换才能正常工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问只有在调用console.log(...css("left"))；时，Jquery + css转换才能正常工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问只有在调用console.log(...css("left"))；时，Jquery + css转换才能正常工作
EN