Question

当我要点击隐藏div时，我想要显示图像。一切正常但我想在显示div之前提醒消息并加载图像。怎么办？我的js和html代码在下面给出：

<h3><a class='show'> (Show/Hide) </a></h3> 
<div id="show"></div>

和我的js代码

jQuery(document).ready(function()
{
  $("a.show").click(function(e) {
  // alert("Hi");
    $('#check').animate({ opacity: "toggle" });
    e.stopPropagation();
  });
});

我想添加一条警告消息和一个名为loading.gif的加载图片。想法？

Answer 1

您可以按此顺序执行此操作：FadeOut，显示图片，最后FadeIn

$( "#check" ).fadeOut( "slow", function() {
    // Animation complete
  });

http://api.jquery.com/fadeOut/ 和 http://api.jquery.com/fadeIn/

Answer 2

jQuery animate是一款功能强大的工具：show，hide，fadeIn，fadeOut，slideUp，slideDown， fadeTo，fadeToggle（以及我无法忍受的其他内容）只是具有特定参数的animate的快捷方式（与$.ajax与$.post非常相似}，$.get）。

传递回调以在动画完成时触发，非常类似于您使用show和hide执行此操作：

$("#a").click(function() {
    $("#b")
    .animate({ borderLeftWidth: "15px" }, 1000, "linear", function() {
      //callback -> animation complete
      alert("all done");
    });
});

您甚至可以将多个来电链接到animate。回调可以绑定到每个animate的调用，使其非常复杂（并且容易出错）。

$("#a").click(function() {
    $("#b")
    .animate({ width: "90%" }, 1000)
    .animate({ fontSize: "24px" }, 1000)
    .animate({ borderLeftWidth: "15px" }, 1000, "linear", function() {
      //callback -> this particular action has been completed
      alert("all done");
    });
});

根据经验，简单说一句：）

有关详细信息，请参阅jQuery文档：http://api.jquery.com/animate/

Answer 3

   jQuery(document).ready(function()
   {
      $("a.show").click(function() {
       $('#check').fadeToggle('slow', function(){
           if($('#check').css('display') == 'none')
           {
            //if #check is hidden
           }
           else
           {
            //if #check is shown
           }
        });
      });
   });

如何在show hide div期间加载图像？

3 个答案: