Question

我正在尝试为要移动的元素设置动画：left:0px但它似乎不起作用。我猜测问题是元素不是绝对定位的，但我如何用动画做到这一点？

fid：https://jsfiddle.net/jzhang172/j2yrumyg/8/

$(function(){

var cheese= $('.ok').offset().top; //Define top of 'hey'

//
//Animates when it reaches red part of page
//
$(window).scroll(function() {
    if ( $(window).scrollTop() >= cheese  ) {
  
        $('.ok').addClass('top');

        $('.nice').hide().fadeIn().html('ok');
            $(".nice").animate({ 
            left:"0"
        }, 600);
        $('.nice').addClass('maybe');

    }
    else{
                $('.ok').removeClass('top');
                $('.nice').removeClass('maybe');
                $('.nice').html('Hey');


    }
});

//
//This part doesn't rely on scroll event and is in charge of changing hover on ".ok" div.
//

      $('.ok').hover(function(){
         if(!$(this).hasClass("top"))
           $(this).addClass('proj-hover');
         
              },function(){
                $(this).removeClass('proj-hover');
               
              });


//
//Animate on click
//
$('.ok').click(function(){
    if ( $(window).scrollTop() >= cheese  ) {

}
else{
    $("body, html").animate({ 
            scrollTop: $('.other').offset().top 
        }, 600);
     
}
});








});

*{
  box-sizing:border-box;
}
body,html{
  padding:0;
  margin:0;
}
.div{
  height:100vh;
  width:100%;
  background:#6464FF;
}
.other{
  height:1000px;
  width:100%;
  background:#FF6161;
}
.ok{
  position:absolute;
  bottom:0;
  left:50%;
  margin-left:-100px;
  width:200px;
  height:50px;
  line-height:50px;
  background:black;
  color:white;
  text-align:center;
  transition:1s;
}

.top{
  position:fixed;
  top:0;
  left:0;
  transition:.7s;
      margin-left: 0px;
      width:100%;

}
.proj-hover{
  background:white;
  color:black;
}
.blue{
  background:blue;
}
.nice{
  transition:0s;
    margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  
  <div class="ok">
  <p class="nice">Hey</p>
  </div>
</div>
<div class="other">
  
</div>

Answer 1

要将文本移动到左侧（以text-alignment属性为中心），您必须更改容器的宽度。我通过添加一些css并删除元素nice的jquery动画来使用CSS3制作动画：

.nice {
  margin: 0px;
  width: 100%;
  transition: width .6s;
}

.maybe {
  width: 0;
}

这里有完整的代码：

$(function() {

  var cheese = $('.ok').offset().top; //Define top of 'hey'

  //
  //Animates when it reaches red part of page
  //
  $(window).scroll(function() {
    if ($(window).scrollTop() >= cheese) {

      $('.ok').addClass('top');

      //$(".nice").animate({
      //  width: '0%'
      //}, 600).css('overflow', '');
      $('.nice').addClass('maybe');

    } else {
      $('.ok').removeClass('top');
      $('.nice').removeClass('maybe');
      $('.nice').html('Hey');
    }
  });

  //
  //This part doesn't rely on scroll event and is in charge of changing hover on ".ok" div.
  //
  $('.ok').hover(function() {
    if (!$(this).hasClass("top"))
      $(this).addClass('proj-hover');
  }, function() {
    $(this).removeClass('proj-hover');
  });

  //
  //Animate on click
  //
  $('.ok').click(function() {
    if ($(window).scrollTop() >= cheese) {

    } else {
      $("body, html").animate({
        scrollTop: $('.other').offset().top
      }, 600);

    }
  });

});

* {
  box-sizing: border-box;
}

body,
html {
  padding: 0;
  margin: 0;
}

.div {
  height: 100vh;
  width: 100%;
  background: #6464FF;
}

.other {
  height: 1000px;
  width: 100%;
  background: #FF6161;
}

.ok {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -100px;
  width: 200px;
  height: 50px;
  line-height: 50px;
  background: black;
  color: white;
  text-align: center;
  transition: 1s;
}

.top {
  position: fixed;
  top: 0;
  left: 0;
  transition: .7s;
  margin-left: 0px;
  width: 100%;
}

.proj-hover {
  background: white;
  color: black;
}

.blue {
  background: blue;
}

.nice {
  transition: 0s;
  margin: 0px;
  width: 100%;
  transition: width .6s;
}

.maybe {
  width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">

  <div class="ok">
    <p class="nice">Hey</p>
  </div>
</div>
<div class="other">

</div>

Answer 2

不确定我是否理解你的问题。 “ok”应该向左移动？您已在CSS类width:100%;中声明top。所以它已经离开了。删除它，它会工作。

或者你可能想要.nice类：

position:absolute;
left:0; right:0;
margin: auto;

并做一个

$(".nice").animate({ 
    right:"100%"
}, 600);

左边的jQuery animate元素

2 个答案: