Question

我使用jQuery + Ajax创建了自己的工具提示，以从外部文件加载内容......太棒了！ - 麻烦是......我有一个在容器背景上运行的loading.gif动画，一旦ajax内容加载，我想删除...我知道如何用我的代码做到这一点？

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery('.ttip').hover(function(){
    var offset = jQuery(this).offset();
    //console.log(offset)
    var width = jQuery(this).outerWidth();
var tooltipId = jQuery(this).attr("rel");
    jQuery('#tooltip-cont').empty().load('tooltips.html ' + tooltipId).fadeIn(500);
    jQuery('#tooltip-cont').css({top:offset.top, left:offset.left + width + 10}).show();
}, function(){
    jQuery('#tooltip-cont').stop(true, true).fadeOut(200);
});
    });
</script>

注意：我已经通过将＃tooltip-cont中的元素设置为更高的z-index来解决这个问题。

Answer 1

在AJAX通话的“成功”部分，添加：

jQuery('#tooltip-cont').hide().

如果您可以将AJAX调用添加到问题中，我可以更具体。

Answer 2

我会将背景图像放在css类中并将该类添加到容器中，当ajax返回内容时，您可以使用.removeClass（）

从容器中删除该类。

CodeyMonkey ::只需检查回网站，抱歉延迟。请求的示例。假设应该显示加载图像的控件是$（'＃tooltip-cont'）。

把它放在你的CSS中 .loadingImage { 背景图像： “\ anyimage.png”; }

使用此选项将带有后台加载图像的类添加到控件（div或其他） $（ '＃工具提示-CONT'）addClass（ “loadingImage”）;

如果要在加载信息后删除类，请使用此选项

 $('#tooltip-cont').removeClass("loadingImage");

将它们放在一起

        <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function(){
        jQuery('.ttip').hover(function(){
  $('#tooltip-cont').addClass("loadingImage");
        var offset = jQuery(this).offset();
        //console.log(offset)
        var width = jQuery(this).outerWidth();
    var tooltipId = jQuery(this).attr("rel");
        jQuery('#tooltip-cont').empty().load('tooltips.html ' + tooltipId, function(){
$('#tooltip-cont').removeClass("loadingImage");
}).fadeIn(500);
        jQuery('#tooltip-cont').css({top:offset.top, left:offset.left + width +  
   10}).show();
    }, function(){
        jQuery('#tooltip-cont').stop(true, true).fadeOut(200);
    });
        });
    </script>

jQuery：加载Ajax请求后删除背景？

2 个答案: