Question

我正在尝试生成一个在页面通过特定窗口宽度后基本淡化某些内容的函数。目前，每当窗口重新调整大小低于，等于或高于1775像素时，下面的代码将运行淡入淡出。当窗口宽度达到1775像素时，我希望它只淡化内容一次，如果窗口宽度低于1775像素，我希望它再次淡出。

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

Answer 1

如果你希望它在低于1775像素和大于1775像素的情况下淡入淡出，你不希望它总是淡入吗？

你只想在jQuery调用中单独使用它：

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

否则，我很困惑！

Answer 2

我做了一个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;
    }
});

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

窗口调整大小超过一定宽度后淡入div内容

2 个答案: