jQuery仅在“检查元素”时有效吗？

Question

我有这个简单的jQuery函数，可切换带有额外信息的div。 但是，仅当我通过Chrome或Firefox检查元素时，它才有效。 我检查了一下是否正确地确定了类的目标，这是我发现的方法（当它突然失效时。）但是，如果没有打开检查寡妇，这是行不通的。

使用jQuery版本1.11.0

我的代码：

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

    $(".but-proj-highlights").click( function(){

         if ($(this).hasClass("isUp") ) {
         $(this).next("#project-highlights").animate({marginTop:"50%"}, 200);           
         $(this).removeClass("isUp");
    } else {
        $(this).next("#project-highlights").animate({marginTop:"-100%"}, 200);  
        $(this).addClass("isUp");
    }

    });
});// END

HTML

<div class="but-proj-highlights isUp">
        Project Highlights
</div><!-- but proj highlights -->

<div id="project-highlights">
    <div class="entry-content">
        <h2>Project Highlights</h2>
        <?php echo  $projHighlights ?>
    </div><!-- entry-contnet -->
</div><!-- project highlights -->

小提琴： https : //jsfiddle.net/qwzb3an8/

Answer 1

jQuery的animate函数是异步的，因此您要等到它完成后再执行remove/add类。

例如：

$(this).next("#project-highlights").animate({marginTop:"50%"}, 200, function () {
    // animate is complete
    $(this).removeClass("isUp");
});