我正在尝试通过点击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
。
答案 0 :(得分:2)
一旦附加了事件处理程序,它就不关心它周围的if condidition,它仍然会在事件发生时触发,所以你必须将条件放在事件处理程序中:
$(window).resize(function(){
if ($('aside').hasClass('done')) {
asideAnime(a,b,c,d,e,f);
}
});
另请注意,将事件处理程序放在另一个事件处理程序中是不好的做法,因为新的resize事件处理程序将附加每隔时间有人点击一旁,并单击旁边三次将触发调整窗口大小时,asideAnime
运行三次。
答案 1 :(得分:0)
if语句中可能不会触发事件。
但是,一旦绑定了事件,它将始终在调整窗口大小时触发。您可以在事件中检查条件广告执行代码。
尝试:
$(window).resize(function(){
if ($('aside').hasClass('done')) {
asideAnime(a,b,c,d,e,f);
}
});
答案 2 :(得分:0)
我建议首先全局定义var a,b,c,d,e,f然后在调整窗口大小时触发aside
标记的点击事件。
$(window).resize(function(){
$(aside).trigger( "click");
});