使用Jquery逐个显示Div [英] Display Div's one by one slow using Jquery

问题描述

HI朋友，



我想逐个显示图像而不是滑动，我将图像排列成圆形。

当我点击一个按钮时，图像应该以慢动作逐个显示，我能够一次显示所有图像但我需要显示像显示图像等待1秒然后第二个图像然后1第二等

HI Friends,

I want to display the images one by one not like sliding, i arranged the images in a round shape.
When i click on a button the images should display one by one in a slow motion, I'm able to do all images to show at a time but I need to show like display images wait for 1 second then 2nd images then 1 second etc.

<div class="mainMenu">
                <img src="img/menu_ic.png" width="70" height="70" alt="">
            </div>
            <div id="allMenus" >
                <div class="menu_ic01" style="display:none;">
                    <img src="img/menu_ic01.png" width="70" height="70" alt="">
                </div>
                <div class="menu_ic02" style="display:none;">
                    <img src="img/menu_ic02.png" width="70" height="70" alt="">
                </div>
                <div class="menu_ic03" style="display:none;">
                    <img src="img/menu_ic03.png" width="70" height="70" alt="">
                </div>
                <div class="menu_ic04" style="display:none;">
                    <img src="img/menu_ic04.png" width="70" height="70" alt="">
                </div>
                <div class="menu_ic05" style="display:none;">
                    <img src="img/menu_ic05.png" width="70" height="70" alt="">
                </div>
                <div class="menu_ic06" style="display:none;">
                    <img src="img/menu_ic06.png" width="70" height="70" alt="">
                </div>
                <div class="menu_ic07" style="display:none;">
                    <img src="img/menu_ic07.png" width="70" height="70" alt="">
                </div>
                <div class="menu_ic08" style="display:none;">
                    <img src="img/menu_ic08.png" width="70" height="70" alt="">
                </div>
                <div class="menu_ic09" style="display:none;">
                    <img src="img/menu_ic09.png" width="70" height="70" alt="">
                </div>
                <div class="menu_ic10" style="display:none;">
                    <img src="img/menu_ic10.png" width="70" height="70" alt="">
                </div>
            </div>

当我点击具有MainMenu类的div时，必须显示div以下。



这是我的Jquery代码

When i click on a div having MainMenu class, below div's has to show.

This is my Jquery Code

<script type="text/javascript">
       $(document).ready(function () {

           $(".mainMenu").click(function () {
               $("#allMenus div").show(100, function () { $(this).delay(5000); });

               $(this).hide();

           });
       });
   </script>

推荐答案

（document）.ready（function（）{

(document).ready(function () {

（。 mainMenu）。click（function（）{

(".mainMenu").click(function () {

（＃allMenus div）。show（100，function（）{

("#allMenus div").show(100, function () {

这篇关于使用Jquery逐个显示Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！