Javascript 使用动画移动div

在以下代码中，默认情况下隐藏.logo。我想在滚动上显示它，因此当它出现时，我想通过一些动画将

向右移动（例如向右滑动）。如果您看到演示，您可以看到当徽标出现或消失时，

会以非常糟糕的方式改变其位置，我希望使其更加平滑

如何做到这一点

HTML:

<div class="header">
    <div class="logo"><img src="http://i.imgur.com/C0ZR4RK.png" /></div>
    <ul class="list">
        <li>Lorem ipsum</li>
        <li>dolor sit amet</li>
        <li>consectetur.</li>
    </ul>
</div>

$(function() {
    var shrinkHeader = 300;
    $(".logo").hide();
    $(window).scroll(function() {
        var scroll = getCurrentScroll();
        if (scroll >= shrinkHeader) {
            $('.header').addClass('shrink');
            $(".logo").fadeIn("slow");
        } else {
            $('.header').removeClass('shrink');
            $(".logo").fadeOut("slow");
        }
    });

    function getCurrentScroll() {
        return window.pageYOffset || document.documentElement.scrollTop;
    }

});

演示：

---

如果这对你有帮助，试试看

.list{
位置：绝对位置；
左：0；
排名：0；
过渡：所有500ms；
}
.header.shrink.list{
左：200px；
}

对要设置动画的文本使用

绝对定位。然后给它一个你想要的初始位置和一个它应该缩小的位置：

            ul {
                list-style: none;
                font-size: 22px;
                position:absolute;
                top:5px;
                left:10px;
                transition:all .3s;
            }

            .shrink ul{
                left:200px;
                top:10px;
            }

演示：
我想这会对您有所帮助。谢谢

 $(function(){
 var shrinkHeader = 300;
    $( ".logo" ).hide();
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader ) {                                
          $('.header').addClass('shrink');
          $( ".logo" ).show();
        }
        else {
            $('.header').removeClass('shrink');
            $( ".logo" ).hide();
        }
  });

function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }

});

使用此代码

ul {
            list-style: none;
            font-size: 22px;
            position:absolute;
            top:5px;
            left:10px;
            -webkit-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
             -o-transition: all 0.4s ease;
              transition: all 0.4s ease;
        }

        .shrink ul{
            left:200px;
            top:10px;
        }