javascript - 页面加载时不显示js内容

Question

我遇到了以下问题:我有一个简单的 javascript - 部分，(.custom-social-proof) 具有不同的内容加载和旋转。除了一瞬间，一切都很好——通常，在页面完全加载之前，我会看到所有元素。我究竟做错了什么？我是 javascript 的新手，所以如果能找到一些帮助，我将不胜感激。

(function(jQuery){
    jQuery.fn.extend({ 
        rotaterator: function(options) {
 
            var defaults = {
                fadeSpeed: 900,
                pauseSpeed: 9000,
				        child:null
            };
             
            var options = jQuery.extend(defaults, options);
         
            return this.each(function() {
                  var o =options;
                  var obj = jQuery(this);                
                  var items = jQuery(obj.children(), obj);
				  items.each(function() {jQuery(this).hide();})
				  if(!o.child){var next = jQuery(obj).children(':first');
				  }else{var next = o.child;
				  }
				  jQuery(next).slideToggle(o.fadeSpeed, function() {
						jQuery(next).delay(o.pauseSpeed).slideToggle(o.fadeSpeed, function() {
              
							var next = jQuery(this).next();
							if (next.length == 0){
									next = jQuery(obj).children(':first');
							}
              
              setTimeout(function() {
							jQuery(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
              }, 9000); // pause between slides
						})
					});
            });
        }
    });
})(jQuery);

.custom-social-proof {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999999999999 !important;
}
.custom-social-proof .custom-notification {
    width: auto;
    min-width: 280px;
    text-align: left;
    z-index: 99999;
    box-sizing: border-box;
    font-weight: 400;
    box-shadow: 2px 2px 10px 2px rgba(11, 10, 10, 0.08);
    border-radius: 50px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    padding: 10px 15px;
    border: 2px solid #344bc1;
}
.custom-social-proof .custom-notification .custom-notification-container {
    display: flex !important;
    align-items: center;
    height: 80px;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-image-wrapper img {
    max-height: 50px;
    width: 50px;
    padding: 0px 5px 0px 10px;
    object-fit: cover;
}
.custom-social-proof .custom-notification .custom-notification-container .warning {
    border: 1px;
    background-color: #fbe8e8;
    border-color: #ffa9a9;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper {
    margin: 0;
    height: 100%;
    color: gray;
    padding-left: 10px;
    padding-right: 20px;
    border-radius: 0 50px 50px 0;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}
.custom-notification-image-wrapper.pulse img {
    margin-top: 0;
}
.custom-notification-content strong {
    color: #575757;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content {
    font-family: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    line-height: 18px;
    color: #616161;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content a {
    color: #354cc5;
    text-decoration-color: #354cc5;
	font-size: 18px;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content a:hover {
    color: #354cc5;
    text-decoration-color: #354cc5;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content small {
  margin-top: 3px !important;
  display: block !important;
  font-size: 12px !important;
  opacity: 0.8;
}
.custom-social-proof .custom-notification .custom-close {
  position: absolute;
  top: 8px;
  right: 28px;
  height: 12px;
  width: 12px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  transform: rotate(45deg);
  opacity: 0;
}
.custom-social-proof .custom-notification .custom-close::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: gray;
  position: absolute;
  left: 0;
  top: 5px;
}
.custom-social-proof .custom-notification .custom-close::after {
  content: "";
  display: block;
  height: 100%;
  width: 2px;
  background-color: gray;
  position: absolute;
  left: 5px;
  top: 0;
}
.custom-social-proof .custom-notification:hover .custom-close {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="all-social-proofs"> 
    <section class="custom-social-proof"><!-- Popup item 1 -->
        <div class="custom-notification">
          <div class="custom-notification-container">
            <div class="custom-notification-image-wrapper">
            </div>
            <div class="custom-notification-content-wrapper warning">
            <p>Content</p>
            </div>
          </div>
        </div>
    </section><!-- popup item ends -->
    <section class="custom-social-proof"><!-- popup item 2 -->
        <div class="custom-notification">
          <div class="custom-notification-container">
            <div class="custom-notification-image-wrapper">
            </div>
            <div class="custom-notification-content-wrapper warning">
            <p>Content</p>
            </div>
          </div>
        </div>
    </section><!-- popup item ends -->
    <section class="custom-social-proof"><!-- popup item 2 -->
        <div class="custom-notification">
          <div class="custom-notification-container">
            <div class="custom-notification-image-wrapper">
            </div>
            <div class="custom-notification-content-wrapper warning">
            <p>Content</p>
            </div>
          </div>
        </div>
    </section><!-- popup item ends -->
    <section class="custom-social-proof"><!-- popup item 2 -->
        <div class="custom-notification">
          <div class="custom-notification-container">
            <div class="custom-notification-image-wrapper">
             
            </div>
            <div class="custom-notification-content-wrapper warning">
            <p>Content</p>
            </div>
          </div>
        </div>
    </section><!-- popup item ends -->
</div>

<script>
jQuery(document).ready(function() {
        jQuery('#all-social-proofs').rotaterator();
 });
</script>

Answer 1

您可以默认隐藏父类，然后在隐藏子类后显示它。

<div id="all-social-proofs" style="display:none"> 
  ...

和

 jQuery(document).ready(function() {
        jQuery('#all-social-proofs').rotaterator();
        jQuery('#all-social-proofs').show();
 });