Question

我有一张带缩略图的照片幻灯片。下一个/上一个按钮根据窗口大小显示和消失;如果缩略图溢出窗口大小，则会出现按钮。如果没有，他们就会消失。我的问题是，有时，它们不会出现，或者它们不会出现几秒钟。在其他时候，他们不会消失。有时它工作正常。

我仍然是jQuery和JavaScript的新手。有什么建议吗？

    // hide previous and next buttons
$('#prev, #next').hide();

// get width of thumbnail list
var thumbsWidth = $('div#thumbs ul').width();

// show/hide next/prev buttons
function buttonVisibility() {
    if (thumbsWidth + 225 > screenWidth) {
        $('#prev, #next')
        .fadeTo('fast', 0.5)
        .hover(function(){
            $(this).fadeTo('fast', 1);
        }, function(){
            $(this).fadeTo('fast', 0.5);
        });
    } else {
        $('#prev, #next').fadeTo('fast', 0, function(){
            $(this).hide();
        });
    }
}

// declare global screenWidth variable
var screenWidth

// find width of thumbnail window and show/hide next/prev buttons accordingly
function findWidth(){
    screenWidth = $('div#thumbs').width();
    buttonVisibility();
}

// perform findWidth() on load and on window resize
findWidth();
$(window).resize(function(){
    findWidth();
});

Answer 1

可能是浏览器在调整窗口大小时必须要做的工作（也就是说，重新设计布局以响应不断变化的窗口大小），添加到你正在制作的DOM中，只是把事情搞砸了。您可能会尝试在触发代码之前等待用户交互完成。

$(window).resize((function() {
  var timeout = null;
  return function() {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(findWidth, 250);
  };
})());

这会改变一些事情，以便你的代码在用户暂停或停止拖动窗口后1/4秒之前不会尝试做任何事情。

Answer 2

加载后计算screenWidth，因此您不必一遍又一遍地搜索div#thumbs。

Answer 3

创建一个变量displayed，用于存储按钮是否可见的当前状态。现在，在resize事件中，如果隐藏了fadeIn，则只会// hide previous and next buttons $prevNext = $('#prev, #next'); $prevNext.hide(); // get width of thumbnail list var $thumbs = $('#thumbs'); var thumbsWidth = $('#thumbs ul').width(); var screenWidth; var displayed = false; // show/hide next/prev buttons function buttonVisibility() { if (thumbsWidth + 225 > screenWidth) { if (!displayed) { displayed = true; $prevNext.fadeTo('fast', 0.5).hover(function () { $(this).fadeTo('fast', 1); }, function () { $(this).fadeTo('fast', 0.5); }); } } else if (displayed) { displayed = false; $prevNext.fadeTo('fast', 0, function () { $(this).hide(); }); } } // find width of thumbnail window and show/hide next/prev buttons accordingly function findWidth() { screenWidth = $thumbs.width(); buttonVisibility(); } // perform findWidth() on load and on window resize findWidth(); $(window).resize(findWidth);。

此外，您可以存储所选元素，以便每次都不进行选择。

{{1}}

Answer 4

onresize事件被触发的频率似乎为inconsistent across browsers。您可能需要实现自定义机制来控制时间。

Answer 5

En este ejemplo vemos como se ejecutara el codigo cada vez que se termine de redimensionar la ventana（在这个例子中，我们看到每次调整窗口大小时代码的执行方式）

<强> DEMO 1

<强> JAVASCRIPT

$(document).ready(function ()
{
    iniciar();
});

$（window）.resize（）正在缓慢

5 个答案: