如何将display：inline-block添加到jQuery fadeIn

Question

我遇到了一个问题，我试图在页面加载时将内联块元素添加到<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <h2 class="contentheading" style="margin-top: 0px;">2016 “Train-The-Trainer” Workshops<br /><br /> AERIAL</h2> <div> <p>$50.00 per class/person <br />Sign up for both for $90.00</p> </div> <div> <form id="paypal_submit_form" action="https://www.paypal.com/***" method="post"> <input name="cmd" type="hidden" value="_cart" /> <input name="upload" type="hidden" value="1" /> <input name="charset" type="hidden" value="utf8" /> <input name="business" type="hidden" value="shana@same.org" /> <input name="currency_code" type="hidden" value="USD" /> <input name="custom" type="hidden" /> <input name="amount" type="hidden" /> <input name="first_name" type="hidden" /> <input name="last_name" type="hidden" /> <input name="address1" type="hidden" /> <input name="city" type="hidden" /> <input name="state" type="hidden" /> <input name="zip" type="hidden" /> <input name="email" type="hidden" /> <input name="night_phone_b" type="hidden" /> <input name="address_override" type="hidden" value="1" /> <div id="paypal_prs" style="font-size: 12px;"> <p> <input id="cat-both" checked="checked" name="cat" type="radio" value="90" /> <label for="cat-both">Both</label> <input id="cat-aerial" name="cat" type="radio" value="50" /> <label for="cat-aerial">Aerial</label> <input id="cat-loto" name="cat" type="radio" value="50" /> <label for="cat-loto">Lockout/Tagout</label> </p> <br /> Members: <select id="bal_number_of_members" style="font-size: 12px; padding: 3px;" name="number_of_members"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> </select> <br /> Total Amount (Cost + Processing Fee): <input style="width: 50px; margin-right: 10px; padding: 2px; padding-bottom: 1px; font-size: 12px;" name="tmp_total_amount" readonly="readonly" type="text" value="93" /> <input id="bal_submit_btn" style="padding: 3px 5px; font-size: 12px; cursor: pointer;" type="button" value="Pay Here" /> <input name="item_name_1" type="hidden" value="2016 Train-The-Trainer Workshops(AERIAL LIFTS &amp; LOCKOUT/TAGOUT)" /> <input name="amount_1" type="hidden" value="90" /> <input name="quantity_1" type="hidden" value="1" /> <input name="item_name_2" type="hidden" value="Processing fee" /> <input name="amount_2" type="hidden" value="0" /> <input name="quantity_2" type="hidden" value="1" /> </div> <input name="notify_url" type="hidden" value="http://some.org/tmp_ipn.php" /> <input name="return" type="hidden" value="http://some.org/" /> <input name="cancel_return" type="hidden" value="http://some.org/index.php?view=article&amp;id=278" /> <input name="no_shipping" type="hidden" value="1" /> </form> </div> <div style="font-size: 11px; margin-top: 10px; color: red;"> Additional 2.9% + $0.30 processing fee will be charged with all orders paid by credit card. </div> <div style="margin-top: 50px;"> <a style="font-size: 18px;" href="images/Flyer_2016.pdf" target="_blank">Download Order Form</a> </div> <p style="font-size: 14px;"> <strong>Please fax or email the order form to the office.</strong> </p> <script type="text/javascript"> $('#bal_submit_btn').on('click',function(e){ //Remove this in production and the form will continue to submit e.preventDefault(); var theFee = getFee(); var thePrice = getPrice(); $('#paypal_submit_form input[name=business]').val('shana@same.org'); $('#paypal_submit_form input[name=amount]').val(thePrice); $('#paypal_submit_form input[name=amount_2]').val(theFee); console.log( $('#paypal_submit_form').serializeObject() ); return false; }) $(document).on('change', $("#bal_number_of_members"), function(e) { return update(); }); function update(){ var qty = $('#bal_number_of_members').val(); var theFee = getFee(); var thePrice = getPrice(); var total = parseFloat(thePrice + theFee); $('#paypal_submit_form input[name=tmp_total_amount]').val(total); $('#paypal_submit_form input[name="amount_1"]').val(total); $('#paypal_submit_form input[name="amount"]').val(total); $('#paypal_submit_form input[name="amount_2"]').val(theFee); $('#paypal_submit_form input[name=quantity_1]').val(qty); return Math.round(total * 100)/100; } function getPrice() { var qty = $('#bal_number_of_members').val(); var pricePerUnit = $("input[name=cat]:checked").val(); var price = pricePerUnit * qty; return Math.round(price *100)/100; } function getFee() { var qty = $('#bal_number_of_members').val(); var pricePerUnit = $("input[name=cat]:checked").val(); var price = pricePerUnit * qty; var theFee = Math.round( ((price*0.029888888888889)+0.30) * 100)/100; return theFee; } $(document).ready(function() { return update(); }); $.fn.serializeObject = function(){ var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; </script> ，但我希望它们在原始display: none中逐个淡出形成。但是，当我执行普通的jQuery inline-block时，元素显示为块。

我的jQuery现在就是这样：

fadeIn

CSS

function blueBoxDelays(){
    $('.fadeBlock1').delay(200).fadeIn(500);
    $('.fadeBlock2').delay(400).fadeIn(500);
};

我可以对jQuery做些什么来将.dark-blue-box, .light-blue-box { height: 50%; width: 25%; display: inline-block; /*display: none; ********I replaced the inline-block with this. vertical-align: top; padding: 0; margin: 0; transition: all .8s ease-in-out; } 作为fadeIn元素来实现吗？

Answer 1

你可以试试这个，

＆＃13;

＆＃13;

$(document).ready(function(e) {

    $('.fadeBlock').css('display','none');
    
    blueBoxDelays();
    
    function blueBoxDelays(){
	var delay = 0;
	$('.fadeBlock').each(function(i){
	   $(this).delay(400+delay).fadeIn(1000);
	   delay = 400*(i+1);
	});
   };
});

＆＃13;

.fadeBlock {
    height: 100px;
    width: 100px;
    display: inline-block;
}
.dark-blue-box{
  background-color: blue;
}
.light-blue-box{
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>

＆＃13;

＆＃13;

＆＃13;

<强> DEMO

注意：

从.dark-blue-box, .light-blue-box

中删除不透明度

Answer 2

通过使用具有过渡属性的不透明度，您可以获得所需的结果。

最初它是

.fadeBlock1 {
   opacity:0;
   transition: all 0.5s ease-in-out;
 }

$('.fadeBlock1').css('opacity','1');

Answer 3

你想要这样的东西吗？

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <style>
        .dark-blue-box{
            display:inline-block;
            border:1px solid #19248c;
            background-color:#19248c;
            height:50px;
            width:50px;
         }
        .light-blue-box{
            display:inline-block;
            border:1px solid #6699cc;
            background-color:#6699cc;
            height:50px;
            width:50px;
        }
    </style>
</head>
<body>
    <div class='dark-blue-box'>
    </div>
    <div class='light-blue-box'>
    </div>  

    <script>
    $(document).ready(function(e) {
        $('.dark-blue-box').css('display','none');
        $('.light-blue-box').css('display','none');
        boxFadeIn();
    });

    function boxFadeIn(){
        $('.dark-blue-box')
          .delay(200)
          .fadeIn(500)
          .queue(function (next) { 
            $(this).css('display', 'inline-block'); 
            next(); 
          });

        $('.light-blue-box')
          .delay(400)
          .fadeIn(500)
          .queue(function (next) { 
            $(this).css('display', 'inline-block'); 
            next(); 
          });
    }
    </script>
</body>
</html>

Answer 4

尝试这个

function blueBoxDelays(){
    $('.fadeBlock1').delay(200).fadeIn(500).css('display','inline-block');
    $('.fadeBlock2').delay(400).fadeIn(500).css('display','inline-block');
};