使用动画

Question

以下代码默认隐藏.logo。我想在滚动时显示它，所以当它出现时我想用一些动画向右移动<ul>（例如向右滑动）。如果您看到该演示，您可以看到当徽标出现或消失时，<ul>会以非常糟糕的方式改变其位置，我想让它更加流畅。

如何实现？

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>

jQuery的：

$(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;
    }

});

演示： http://jsfiddle.net/ztdr68aw/

Answer 1

试试这对你有帮助，

http://jsfiddle.net/raaj_obuli/ztdr68aw/1/

.list {

  position: absolute;

  left: 0;

  top: 0;

  transition: all 500ms;

}

.header.shrink .list {

  left: 200px;

}

Answer 2

对要动画的文字使用absolute定位。然后只需给它你想要的初始位置和它应该缩小的位置：

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

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

演示：Fiddle

Answer 3

我认为这会对你有所帮助。谢谢！

 $(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;
    }

});

Answer 4

使用此代码

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;
        }