Question

有人可以告诉我这里有什么不对吗？所有图像都显示在按钮点击div6之后，它根本没有显示？我在dix6上的代码有错吗，任何帮助都非常感谢！

非常感谢！

   <!DOCTYPE html>
   <html>
   <head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  </script>
   <script>
  $(window).load(function () {
    $("button").click(function () {
        $("#div1").fadeIn();
        $("#div2").fadeIn(2000);
        $("#div3").fadeIn(3000);
        $("#div4").fadeIn(5000);
        $("#div5").fadeIn(7000);
        $("#div6").animate({ left: '250px' });

    });
    });
   </script>
   </head>
   <body>
    <p>Demonstrate fadeIn() with different parameters.</p>
    <button>Click to fade in boxes</button>
    <br />
    <br />
   <div id="div1"style="display: none">    
    <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/myimage1.png" alt="about" width="150" height="75" /></a>
    </div>
  <div id="div2" style="display: none">
  <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/myimage2.png" alt="about" width="150" height="75"/></a>
  </div>
  <div id="div3" style="display: none">
  <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/myimage3.png" alt="about" width="150" height="75"/></a>
  </div>
  <div id="div4" style="display: none">
  <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/myimage4.png" alt="about" width="150" height="74"/></a>
  </div>
  <div id="div5" style="display: none">
  <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/myimage5.png" alt="about" width="150" height="75"/></a>
  </div>
   <div id="div6" style="display: none">
  <a href="http://www.stackoverflow.com" title="go to link">
    <img src="/images/myimage6.png" alt="about" width="150" height="75"/></a>
  </div>
 </body>

Answer 1

您的div仍然隐藏，animate不会删除display:none

尝试

$("#div6").animate({ left: '250px' }).show();

Answer 2

你没有展示div而只是动画..就像这样使用。

$("#div6").show().animate({ left: '250px' });

Answer 3

试试这个，这会对你有帮助

 $("button").click(function () {
        $("#div1").fadeIn();
        $("#div2").fadeIn(2000);
        $("#div3").fadeIn(3000);
        $("#div4").fadeIn(5000);
        $("#div5").fadeIn(7000);
        $("#div6").animate({ marginLeft: "+=50px" },
                  {
                      duration: 500,
                      complete: function () {
                   $("#div6").show();       
                      }
                  });

    });

小提琴Here

jQuery没有在点击时显示图像

3 个答案: