javascript - 调整屏幕大小时再次运行函数

Question

我正在尝试制作一个通过单击aside 标签运行的动画。之后，我想在调整屏幕(窗口)大小时再次运行 asideAnime 函数。

这是我的 JS 代码:

var image_url = $('aside').css('background-image'),image;
// Removing url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

if (image_url[1]) {
    image_url = image_url[1];
    image = new Image();

    $(image).load(function () {
        var a = image.width;
        var b = image.height;
        var c = $(window).width();
        var d = $(window).height();
        var e = ((d-b)/b); //height inscrease amount ratio
        var f = a+(e*a); //changing width based on height change

        $('aside').click(function(){
            asideAnime(a,b,c,d,e,f);
            $(this).addClass('done');
        });
    });
    image.src = image_url;
}

var asideAnime = function(a,b,c,d,e,f) {
    var g = $('aside').width();
    var h = (e*a); //the amount change in width
    var condition = h > -100;
    $('aside').animate({
        width: f,
        maxWidth: c
    });

    if(condition) {
        $('.main').animate({
            right: -f,
            left: f,
            marginLeft: "0"
        });
    } else {
        $('.main').animate({
            right: "0",
            left: f,
            marginLeft: "0"
        });
    };
}

我尝试在调整大小函数之前使用 if 语句来执行此操作，但它不起作用..

if ($('aside').hasClass('done')) {
    $(window).resize(function(){
        asideAnime(a,b,c,d,e,f);
    });
}

有人有什么想法吗？谢谢

解释更多:

有一个宽度为 30% 的 aside 标签和一个带有 background-size:cover 的背景图像。单击aside，aside 将打开并显示完整图像。所有这些代码行都是因为我试图根据 background-size:cover 所做的 bg 更改打开 aside，同时保持比例。

Answer 1

一旦附加了事件处理程序，它就不会关心它周围的 if 条件，当事件发生时它仍然会始终触发，因此您必须将条件放在事件处理程序中:

$(window).resize(function(){
    if ($('aside').hasClass('done')) {
        asideAnime(a,b,c,d,e,f);
    }
});

另请注意，将一个事件处理程序放置在另一个事件处理程序中是不好的做法，因为每次有人单击旁边时都会附加一个新的调整大小事件处理程序，并且单击旁边三次将触发调整窗口大小时 asideAnime 函数三次。