通过日期淡化更改日期交换答案

【问题标题】：Change date swapping by date fading通过日期淡化更改日期交换
【发布时间】：2014-06-24 17:27:43
【问题描述】：

感谢您给出的所有答案！

当我滚动到特定的“帖子”时，我设法使日期自动更改。你可以在这里看到结果： http://goo.gl/Qm8mj6

向下滚动直到底部..您会看到日期发生变化..

但我想将日期淡化为另一个。实际上它只是改变而没有褪色。我希望我足够理解..？

这是我正在使用的代码

$(window).load(function () {
   $(window).on("scroll resize", function () {
     var pos = $('#date').offset();              
     $('.post').each(function () {             
      if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {                 
          $('#date').html($(this).find('.description').text());             
          $('#date2').html($(this).find('.description2').text());           
          $('#date3').html($(this).find('.description3 ').text()); //or any other way you want to get the date                 
            return; //break the loop             
             }         
         });     
      });      
  })

有没有人提供线索..？非常感谢..！

【问题讨论】：

查看此问题以了解一种实现文本淡入淡出效果的方法：stackoverflow.com/questions/13638328/…
嗨，谢谢，我已经看到了这个问题..但我不知道如何应用到我的代码..？不知道要改什么..？你知道要尝试什么吗..？

标签： javascript jquery scroll fade offset

【解决方案1】：

以下是您如何将链接问题中的解决方案应用于您的代码：

if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
    var desc1 = $(this).find('.description').text(),
        desc2 = $(this).find('.description2').text(),
        desc3 = $(this).find('.description3').text();
    $('#date').stop().animate({
        opacity: 0
    }, 500, function () {
        $(this).stop().text(desc1).animate({
            opacity: 1
        }, 500);
    });
    $('#date2').stop().animate({
        opacity: 0
    }, 500, function () {
        $(this).stop().text(desc2).animate({
            opacity: 1
        }, 500);
    });
    $('#date3').stop().animate({
        opacity: 0
    }, 500, function () {
        $(this).stop().text(desc3).animate({
            opacity: 1
        }, 500);
    });
    return false; // break the loop
}

另请注意，您需要return false 来终止循环。

FIDDLE

【讨论】：

嗨，Barmar，谢谢！不幸的是，代码不起作用。日期只是循环闪烁，到达第二个帖子时不会改变..你知道为什么..？
请做一个小提琴，我稍后再玩。
我认为你小提琴中的问题只是 CSS 中的一个错字。 .opacit 应该是 .opacity。
当我写下我的答案时，我从我链接到的问题中复制了代码，而不是它的答案。我现在已经纠正了。但我认为如果你只是修复你的 CSS，你会得到你想要的。见jsfiddle.net/barmar/cdYEZ/8
嗨，实际上不透明它是我这样命名的一个类..所以我应该更正代码并且它应该可以工作..？

【解决方案2】：

没有设法让日期在更改时褪色.. 这是小提琴： http://jsfiddle.net/cdYEZ/9/

$(window).load(function () {
$(window).on("scroll resize", function () {
    var pos = $('#date').offset();
    $('.post').each(function () {
        if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
            $('#date').html($(this).find('.description').text());
            $('#date2').html($(this).find('.description2').text());
            $('#date3').html($(this).find('.description3 ').text()); //or any other way you want to get the date
            return; //break the loop
        }
    });
});


})

如果有人有线索..？

谢谢！

【讨论】：