滚动时动画div的宽度答案

【问题标题】：animate width of div when scrolling滚动时动画div的宽度
【发布时间】：2014-10-13 12:31:53
【问题描述】：

首先，我是 jquery 的新手，我不太擅长它。我有一个固定宽度的 div，我希望它在您开始向下滚动时扩展到全宽。到目前为止，我有以下代码：

var fullwidth = $(window).width();
var smallwidth = 1100;

$(window).scroll(function(){    
    if ($(window).scrollTop() > 0) {
        $('#navigation').animate({width: fullwidth}, 1000);
    } else {
        $('#navigation').animate({width: smallwidth}, 1000);
    }
});

它的作用是当你滚动时它会扩大，但当你再次滚动到顶部时它不会收缩。当我使用 fadeOut 和 fadeIn 时，它工作得很好。一些帮助将不胜感激！

小托马斯

【问题讨论】：

标签： jquery-animate width

【解决方案1】：

$(window).scroll() 不会“实时”运行，但实际上每隔几毫秒或更长时间就会触发一次。我建议你看看throttle/debounce jQuery plugin

我做了一个小模型，在 jsfiddle 上，你可以在这里找到它：

jsfiddle

我认为该代码是不言自明的。基本上，debounce 插件每 250 毫秒运行一次回调函数，即使最后一个窗口滚动触发器在不到 250 毫秒前被调用。

JS：

var fullwidth = $(window).width();
var smallwidth = 1100;

$(window).scroll( $.throttle( 250, animate ) )

function animate() {
    var navi = $('#navigation');
    //we're adding .wide class to avoid multiple runs of this animation.
    if (window.pageYOffset > 0 && !navi.hasClass('wide')) {
        navi.addClass("wide").stop().animate({width: fullwidth}, 1000);
    }

    if (window.pageYOffset == 0 ) {
        console.clear();
        console.log(smallwidth);
        navi.stop().animate({width: smallwidth}, 1000, function() {
            $(this).removeClass('wide');
        });
    }        
}

【讨论】：

【解决方案2】：

感谢您的遮阳篷，我现在可以使用了！我仍然不完全理解为什么我的代码不起作用。它确实适用于fadeIn/fadeOut，但不适用于动画，这似乎有点奇怪。

还有一件事，有没有不使用该throttle/debounce jQuery 插件的解决方案？

【讨论】：

【解决方案3】：

另外，我在 .animate() 之前添加了 .stop() 有点让它工作。然而，这样做是当您在每次滚动动作期间滚动动画时都会出现口吃。我在下面做了一个例子。

http://jsfiddle.net/et8hghuw/

$(window).on("load resize", function() {
  var fullwidth = $(window).width();
  if ($(window).width() >= 500) {
    var smallwidth = 500;
  } else {
    var smallwidth = $(window).width();
  }
  if ($(window).scrollTop() > 0) {
    $('#navigation').css('width', fullwidth);
  } else {
    $('#navigation').css('width', smallwidth);
  }
});

$(window).scroll(function() {
  var fullwidth = $(window).width();
  if ($(window).width() >= 500) {
    var smallwidth = 500;
  } else {
    var smallwidth = $(window).width();
  }
  if ($(window).scrollTop() > 0) {
    $('#navigation').stop().animate({
      width: fullwidth
    }, 200);
  } else {
    $('#navigation').stop().animate({
      width: smallwidth
    }, 200);
  }
});

有什么办法可以消除口吃？

【讨论】：