.SlideDown 不适用于附加的 Html

.SlideDown not working on appended Html

本文关键字：Html 不适用 适用于 SlideDown      更新时间：2023-09-26

在附加div时，我似乎无法使slideDown效果起作用。HTML 和 jQuery 如下。
任何建议都会有很大帮助。谢谢！

.HTML 

<div class="pin">
    <div class="top-pin">
        <img class="icon-pic" src="img/nautica.gif" />
        <p class= "pin-title">Nautica</p>
    </div>
    <img class="pin-pic" src="img/shoes.jpg" />
    <div class="pin-comment">
        <img class="small-icon-pic" src="img/Calvin_pic.png" />
        <p class="pin-comment-text">Can't go wrong with classic sperrys.     #topsiders</p>
    </div>
</div>

.JS

var hiddenComments = "<div class='hidden-comment'><img class='small-icon-pic' src='img/Calvin_pic.png' /><p class='pin-comment-text'>Can't go wrong with classic sperrys. #topsiders</p></div>";
$(".comment-icon").click(function (event) {
    $('.pin-comment:last').append(hiddenComments);
    $('.pin-comment').find('.new-comment:last').slideDown('slow');
    $(this).parent().find(".comment-hidden").slideDown();
    $(this).parent().find(".comment-count").hide();
});

也许您需要将动画作为其他动画的回调包含在内，因为我记得动画会停止其他动画

试试这个

$(".comment-icon").click(function (event) {
    $('.pin-comment:last').append(hiddenComments);
    $('.pin-comment').find('.new-comment:last').slideDown('slow', function(){
          $(this).parent().find(".comment-hidden").slideDown( function(){
              $(this).parent().find(".comment-count").hide();
          );
        );
    });

也许你需要重新排列jQuery这个选择器

相关文章：