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);
    });
}

任何人都有任何想法？感谢

要解释更多信息：

aside标记宽度为30％，背景图像为background-size:cover。点击aside，aside即会打开并显示完整图片。所有这些代码都是因为我试图根据aside在保持比率时所做的bg变化来打开background-size:cover。

Answer 1

一旦附加了事件处理程序，它就不关心它周围的if condidition，它仍然会在事件发生时触发，所以你必须将条件放在事件处理程序中：

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

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

Answer 2

if语句中可能不会触发事件。

但是，一旦绑定了事件，它将始终在调整窗口大小时触发。您可以在事件中检查条件广告执行代码。

尝试：

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

Answer 3

我建议首先全局定义var a，b，c，d，e，f然后在调整窗口大小时触发aside标记的点击事件。

$(window).resize(function(){
$(aside).trigger( "click");
});

调整屏幕大小时再次运行一个函数

3 个答案: