Question

我试图让一个hasClass动画在pageload上工作，但显然它比它听起来更难。

$(document).ready(function() {
  if ($('html').hasClass('first')) {
        // Then animate
    $(".second").animate,500({marginTop: "30px"});
  } else {
        // Then normal
    $(".second").animate,500({marginTop: "0px"});
  }
});

下面是一个codepen示例 http://codepen.io/Maksketch/pen/ZLrwGM

如果能解决这个问题，可能会包含5秒的动画延迟，那就太棒了！

注意：我不想要切换功能。就在加载当前页面时。

Answer 1

将$('html').hasClass('first')更改为$('html div').hasClass('first')，您还需要编写像.animate( {marginTop: "30px"},500);

这样的动画片

延迟时间使用.delay(time in seconds) $(".second").delay(5000).animate

（5000 = 5 seconds）

$(document).ready(function() {
  if ($('html div').hasClass('first')) {
    // Then animate
    $(".second").delay(5000).animate({
      marginTop: "30px"
    }, 500);
  } else {
    // Then normal
    $(".second").animate({
      marginTop: "0px"
    }, 500);
  }
});

body {
  margin: 0;
  background: #999;
  font-family: arial;
}
.first {
  width: 100%;
  position: relative;
  background: rgba(50, 50, 50, 1);
  color: #FFF;
  padding: 5px 0px 6px 0px;
  text-align: center;
  z-index: 4;
}
.second {
  width: 100%;
  background: rgba(110, 170, 0, 1);
  color: #FFF;
  padding: 5px;
  text-align: center;
  position: absolute;
  top: 0;
  border-bottom: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head></head>

<body>
  <div class="first">If I exist show second</div>
  <div class="second">Hide me if first is non-existing</div>
</body>

</html>

Answer 2

多个错误。

首先，html不是.first，而是一个div。您可以在您的情况下使用$(div).hasClass('.first')或简单$('.first')。

然后，对动画的调用不正确。它应该是：

$(".second").animate({marginTop: "0px"}, 500);

请注意，如果您打开开发者控制台，它会告诉您错误，即Uncaught TypeError: 500 is not a function。

最后，要添加延迟，您只需使用.delay，例如：

$(".second").delay(500).animate({marginTop: "30px"}, 500);

最后，你得到：

$(document).ready(function() {
  if ($('.first')) {
        // Then animate
    $(".second").delay(5000).animate({marginTop: "30px"}, 500);
  } else {
        // Then normal
    $(".second").animate({marginTop: "0px"}, 500);
  }
});

这是一个working jsfiddle。

Answer 3

您最好使用$('.first').length

$(document).ready(function() {
  if ($('.first').length) {
    // Then animate
    $(".second").animate({
      marginTop: "30px"
    }, 500);
  } else {
    // Then normal
    $(".second").animate({
      marginTop: "0px"
    }, 500);
  }
});

Jquery hasClass animate

3 个答案: