jquery阿贾克斯beforeSend加载动画
问题描述:
嗨,大家好,我有我的ajax加载动画的一个问题。问题是,当我将所有图像中的加载动画悬停在任何图像上时。jquery阿贾克斯beforeSend加载动画
像这样FIDDLE
我要让我先悬停图像,然后.ajax-loading
对于只有图像被激活。如果我徘徊第二个图像,然后.ajax-loading
只有第二个图像分机有效。
任何人都可以帮助我吗? CSS
.ajax-loading {
transition: all 0.3s;
opacity: 0;
z-index: -1;
}
.ajax-loading.active {
opacity: 1;
z-index: 100;
}
和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();
});
});
答
的问题是beforeSend
功能激活类active
所有与类.ajax-loading
的元素。
由于您将正在接收悬停的jQuery对象传递给该函数,因此可以利用该对象并将类active
仅添加到类.ajax-loading
下的那些元素。
beforeSend: function() {
$('.ajax-loading',e).addClass('active');// Note the ,e that I added
},
希望它能帮助。
我没有看到它。谢谢。 – innovation 2015-02-08 20:17:45