1

我正在尝试生成一个在页面通过特定窗口宽度后基本上会淡入某些内容的函数。目前，每次将窗口大小调整为低于、等于或高于 1775 像素时，下面的代码都会运行淡入淡出。我希望它仅在窗口宽度达到 1775 像素时淡化内容一次，并且在窗口宽度降至 1775 像素以下时再次淡化内容。

$(window).on('resize', function (event) { 
    if ($(window).width() >= 1775) {   
        $('.content-genre').hide().fadeIn(250);
} else {
    $('.content-genre').hide().fadeIn(250);
    }
});
4

2 回答 2

0

我制作了一个 jsfiddle，它可以满足我的需求。我使用了不同的数字，以便更容易看到。它在 800 而不是 1775 处切换。

http://jsfiddle.net/eqrQS/4/

这是jQuery：

var toggle = $(window).width() < 800;
$(window).on('resize', function (event) {
    $('#text').text($(window).width());
    if ($(window).width() >= 800 && toggle) {
        $('.content-genre').hide().fadeIn(1000);
        toggle = false;
    } else if ($(window).width() < 800 && !toggle) {
        $('.content-genre').hide().fadeIn(1000);
        toggle = true;
    }
});

基本上，我所做的只是在调整大小范围之外创建一个变量来跟踪事件发生的时间。如果这不是你所追求的，请告诉我。

于 2013-06-25T17:40:36.953 回答
0

如果你想让它淡入小于 1775px 和大于 1775px，你不希望它总是淡入吗？

您只希望它在 jQuery 调用中单独存在：

$('.content-genre').hide().fadeIn(250);

不然我就糊涂了！

于 2013-06-25T17:36:18.127 回答