按日期淡化更改日期交换

时间:2014-06-24 17:27:43

标签: javascript jquery scroll fade offset

Thaks为你提供的所有答案!

当我滚动特定的“帖子”时,我设法自动更改日期。 你可以在这里看到结果: 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             
             }         
         });     
      });      
  })

有人作为线索......? 非常感谢..!

2 个答案:

答案 0 :(得分:0)

以下是将链接问题中的解决方案应用于代码的方法:

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

答案 1 :(得分:0)

当它改变时,没有设法让日期消失。 这是小提琴: 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
        }
    });
});


})

如果有人有线索......?

谢谢!