javascript Jquery Ajax beforeSend 加载动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28398711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Ajax beforeSend loading animation
提问by innovation
Hi everyone i have one problem with my ajax loading animation. The problem is when i hover any image the loading animation active under all images.
大家好，我的 ajax 加载动画有一个问题。问题是当我悬停任何图像时，所有图像下的加载动画都处于活动状态。
Like this FIDDLE
喜欢这个小提琴
I want to make when i hover first image then .ajax-loadingactivated for only that image. and if i hover second image then .ajax-loadingactive for only second image ext..
我想在我悬停第一个图像然后.ajax-loading仅为该图像激活时制作。如果我将第二张图片悬停在第二张图片上，则.ajax-loading仅激活第二张图片。
Anyone can help me here ? CSS
任何人都可以帮助我吗？CSS
.ajax-loading {
transition: all 0.3s;
opacity: 0;
z-index: -1;
}
.ajax-loading.active {
opacity: 1;
z-index: 100;
}
and AJAX
和 AJAX
$(document).ready(function () {
function showProfileTooltip(e, id) {
//send id & get info from get_profile.php
$.ajax({
url: '/echo/html/',
data: {
html: response,
delay: 0
},
method: 'post',
beforeSend: function() {
$('.ajax-loading').addClass('active');
},
success: function (returnHtml) {
e.find('.user-container').empty().html(returnHtml).promise().done(function () {
$('.the-container').addClass('loaded');
});
}
}).complete(function() {
$('.ajax-loading').removeClass('active');
});
}
function hideProfileTooltip() {
$('.the-container').removeClass('loaded');
}
$('.the-container').hover(function (e) {
var id = $(this).find('.summary').attr('data-id');
showProfileTooltip($(this), id);
}, function () {
hideProfileTooltip();
});
});
采纳答案by acontell
The problem is that the beforeSendfunction activate the class activefor all the elements with the class .ajax-loading.
问题是该beforeSend函数为具有 classactive的所有元素激活class .ajax-loading。
Since you're passing the jQuery object that is receiving the hover to the function, you can take advantage of that and add the class activeonly to those elements with the class .ajax-loadingunder it.
由于您将接收悬停的 jQuery 对象传递给函数，因此您可以利用它并将该类active仅添加到其.ajax-loading下具有该类的那些元素中。
beforeSend: function() {
$('.ajax-loading',e).addClass('active');// Note the ,e that I added
},
Hope it helps.
希望能帮助到你。
