JQuery的.show（「慢」）不渲染元素

我使用一些基本的JQuery：JQuery的.show（「慢」）不渲染元素

$(document).ready(function() { 
    $('.opening-message a').on('click', function(e) { 
    e.preventDefault(); 
    $(".opening-message").hide(); 
    $(".message-one").show("slow"); 
    $(".reply-one").delay(1000).show("slow"); 
    $(".message-options").delay(2000).show("fast", "easing"); 
    }); 

    $('.level-three-message a').on('click', function(e) { 
    e.preventDefault(); 
    $(".level-one-message").hide(); 
    $(".level-two-message").hide(); 
    $(".level-three-message").hide(); 
    $(".stage-one-message-level-three").show("slow"); 
    $(".stage-one-reply-level-three").delay(1000).show("slow"); 
    });

}

我的HTML DOM是下面，請原諒它的長度。正如你在下面看到的那樣，封閉的div已經可見，但是當我刪除「慢」參數時，其中的div顯示，所以我不知道爲什麼這不起作用？

<!DOCTYPE html> 
<html> 

    <div class="message-area"> 
    <div class="reply-one-lvl-one" style="display:none"> 
     <%= @stage_one_messages_level_one %> 
    </div> 

    <div class="reply-one-lvl-two" style="display:none"> 
     <%= @stage_one_messages_level_two %> 
    </div> 

    <div class="reply-one-lvl-three" style="display:none"> 
     <%= @stage_one_messages_level_three %> 
    </div> 

    <div class="opening-message"> 
     <p>Press hello to get started</p> 
     <a href=''> 
      <%= @first_message.text %> 
     </a> 
    </div> 

     <div class="message-options" style="display:none"> 

     <p class="message-options-intro">Now choose your reply. Make it good!</p> 

     <div class="level-one-message"> 
     <a href=""> 
      <%= @stage_two_message_level_one.text %> 
     </a> 
     </div> 

     <div class="level-two-message"> 
     <a href=""> 
      <%= @stage_two_message_level_two.text %> 
     </a> 
     </div> 

     <div class="level-three-message"> 
     <a href=""> 
      <%= @stage_two_message_level_three.text %> 
     </a> 
     </div> 
    </div> 
    </div> 

    <div class="chat-area"> 
    <div class="message message-one speech-bubble-message" style="display:none"> 
     <p><%= @first_message.text %></p> 
    </div> 

    <div class="message reply-one speech-bubble-reply" style="display:none"> 
     <p><%= @first_reply.text %></p> 
    </div> 

    <div class="message stage-one-message-level-three speech-bubble-message" style="display:none"> 
     <p><%= @stage_one_message_level_three.text %></p> 
    </div> 

    <div class="message stage-one-reply-level-three speech-bubble-reply" style="display:none"> 
     <p><%= @stage_one_reply_level_three.text %></p> 
    </div> 
    </div> 

</html>

在$('.opening-message a')做工精細的第一套.show("slow")，但$('.level-three-message a')內的那些不工作。任何想法，爲什麼這可能是？當我刪除緩慢的論據時，它們都呈現。

來源

2017-09-05 Freddy

是否有可能存在父元素是不可見的？你可以顯示你的HTML嗎？ – Jerodev

您可以請用jsfiddle重現問題嗎？ –

請向我們展示您的HTML DOM –

刪除單詞"easing"，它是無效的 - 你必須告訴它的easing類型，例如"swing"

變化：

$(".message-options").delay(2000).show("fast", "easing");

，例如

$(".message-options").delay(2000).show("fast", "swing");

Here's a fiddle showing it working

來源

2017-09-05 13:03:27

完美。所以「寬鬆」的論點讓後來的論點變得不正確？ – Freddy

是的這是正確的 - 如果發生什麼事情，總是看你的控制檯，它會告訴你什麼是壞的。 –

當然！謝謝！ – Freddy

我建議停止使用「慢」一詞，這意味着600毫秒。我也注意到你正在使用延遲，我建議改變它以使用完整的功能。就像這樣：

$(".opening-message").hide(); 
$(".message-one").show("slow"); 
$(".reply-one").delay(1000).show("slow"); 
$(".message-options").delay(2000).show("fast", "easing");

成爲

$(".opening-message").hide(0, function() { 
     $(".message-one").show(600, function() { 
      $(".reply-one").show(600, function() { 
       $(".message-options").show(200, "linear"); 
      }); 
     }); 
    });

這樣你就可以擁有一切爲了，當一個人完成其他開始。

我也把你的代碼放到一個小提琴和.show（「慢」）與jQuery的2.x的工作

的所有信息，你需要在這裏：http://api.jquery.com/show/

來源

2017-09-05 13:05:57

JQuery的.show（ 「慢」）不渲染元素

回答

相關問題

JQuery的.show（「慢」）不渲染元素