我有这部分代码(我会指出我感到困惑的地方,只是添加了那个巨大的墙壁以吸引任何想要真正挖掘的人)。
无论如何,行为是显示这些框,当您单击一个框时,该框会展开,并显示更多信息。这种情况在70%的情况下起作用,但是,当图像没有被锁定时,当您再次单击该框以使其最小化时,它开始最小化,然后弹出。我想知道这是否与该行有关:if($(this)[0].style.width == '70%'){
如果这还不够,请随意询问,如果您想尝试复制该问题:
http://newgameplus.nikuai.net/
尝试搜索几个游戏,然后点击结果。 (只有当我说的话没有意义时才会这样做)
谢谢。
$container.on("click", ".box", function (event) {
var description;
var user_id;
var org_img = $(this).find("img").attr("src");
if ($(this)[0].style.width == '70%') {
$(this).find("img").attr("src", org_img);
$(this).css('width', '18%');
$(this).find(".resultData").fadeOut('slow');
$container.masonry('reload');
} else {
var me = this;
value['name'] = $(me).find("p").html();
oldImage = $(this).find("img").attr("src");
$.ajax({
url: 'scripts/php/fetchResultsData.php',
data: {
action: value
},
type: 'post',
dataType: 'json',
success: function (data) {
description = data[0][2];
for (var i = 0; i < $test.length; i++) {
if ($test[i][1][2]['name'] == value['name']) {
pos = i;
break;
}
}
$(me).find("img").attr("src", data[0][4]);
$(me).css('width', '70%');
$(me).append("\
<div class='resultData'>\
<div class='resultName'>" + value['name'] + "</div>\
<div class='resultDesc'>" + description + "</div>\
<div class='reasonDataTitle'> Similar tropes between this game and the searched games </div>\
<div class='reasonData'>" + $test[pos][4] + "</div>\
<div class='wikiLink'><a href='http://wikipedia.org/wiki/" + value['name'] + "'>Wikipedia</a></div>\
<div class='resultLike'></div>\
</div>");
value['clicked'] = 0;
$.ajax({
url: 'scripts/php/userProfile.php',
data: {
action: value
},
type: 'post',
dataType: 'json',
success: function (profileData) {
if (profileData == 'alreadyAdded') {
$(me).children('.resultData').children('.resultLike').html('un-Favourite');
} else if (profileData == 'notLoggedIn') {
$(me).children('.resultData').children('.resultLike').html('Login to add');
} else {
$(me).children('.resultData').children('.resultLike').html('Favourite?');
}
}
});
$(me).on("click", '.resultLike', function (event) {
event.stopPropagation()
value['clicked'] = 1;
$.ajax({
url: 'scripts/php/userProfile.php',
data: {
action: value
},
type: 'post',
dataType: 'json',
success: function (profileData) {
if (profileData == 'removed') {
$(me).children('.resultData').children('.resultLike').html('Favourite?');
} else if (profileData == 'notLoggedIn') {
$(me).children('.resultData').children('.resultLike').html('Login to add');
} else {
$(me).children('.resultData').children('.resultLike').html('un-Favourite');
}
}
});
});
$container.masonry('reload');
}
});
}
});
答案 0 :(得分:2)
我怀疑你的效果代码中存在竞争条件。 jQuery效果以异步方式运行,因此$container.masonry('reload')
将在fadeOut
启动时调用,而不是在完成后调用。如果jQuery Masonry插件影响你正在淡出的任何块的显示(并且它的文档表明这很可能),那么同时运行的两个函数的竞争条件将取消第一个。
要解决此问题,请尝试在回调函数中运行Masonry重新加载到fadeOut
,如下所示:
$(this).find(".resultData").fadeOut('slow', function () {
$container.masonry('reload');
});
它发生的原因有时仅取决于事物的加载速度,这可以解释为什么只有当某些资产没有被缓存时才会发生。