.SlideDown无法处理附加的Html

时间:2015-03-09 18:38:48

标签: javascript jquery html

在追加slideDown时似乎无法使div效果有效。 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();
});

1 个答案:

答案 0 :(得分:0)

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

试试这个

$(".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