1

当我要单击隐藏 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 的加载图像。知道吗？

4

3 回答 3

1

jQueryanimate是一个强大的工具：show, hide, fadeIn, fadeOut, slideUp, slideDown, fadeTo（fadeToggle以及其他我无法忍受的）只是animate带有特定参数的快捷方式（非常类似于 to $.ajax, $.post）$.get。

当动画完成时传递一个回调来触发，就像你用showand做的一样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/

于 2013-11-03T12:33:42.443 回答
1

您可以按以下顺序进行操作：FadeOut，显示图像，最后FadeIn

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

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

于 2013-11-03T12:13:46.093 回答
0 
   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
           }
        });
      });
   });
于 2013-11-03T12:41:01.627 回答