0

我正在使用以下 jquery 弹跳效果：

(function($){

    /* The plugin extends the jQuery Core with four methods */

    /* Converting an element into a bounce box: */
    $.fn.bounceBox = function(){

        /*
            Applying some CSS rules that center the
            element in the middle of the page and
            move it above the view area of the browser.
        */

        this.css({
            top     : -this.outerHeight(),
            marginLeft  : -this.outerWidth()/2,
            position    : 'fixed',
            left        : '50%'
        });

        return this;
    }

    /* The boxShow method */
    $.fn.bounceBoxShow = function(){

        /* Starting a downward animation */

        this.stop().animate({top:0},{easing:'easeOutBounce'});
        this.data('bounceShown',true);
        return this;
    }

    /* The boxHide method */
    $.fn.bounceBoxHide = function(){

        /* Starting an upward animation */

        this.stop().animate({top:-this.outerHeight()});
        this.data('bounceShown',false);
        return this;
    }

    /* And the boxToggle method */
    $.fn.bounceBoxToggle = function(){

        /*
            Show or hide the bounceBox depending
            on the 'bounceShown' data variable
        */

        if(this.data('bounceShown'))
            this.bounceBoxHide();
        else
            this.bounceBoxShow();

        return this;
    }

})(jQuery);

在以下动态加载的动态 div 上：

<div id="growl">
    <span id="growl-title" class="growl-title"></span>
    <span id="growl-content" class="growl-content"></span>
</div>

目前效果如下：用户点击按钮然后在服务器端完成后执行回调javascript以显示div，效果如下：

$('#growl').bounceBoxToggle();

但我有一个案例，从服务器端我根据一个属性显示这个 div（div 可能由于 ajax 调用而附加到 dom），如下所示：

<c:if test="#{showGrowl==true}">
<div id="growl">
        <span id="growl-title" class="growl-title"></span>
        <span id="growl-content" class="growl-content"></span>
</div>
</c:if>

，我希望在这种情况下，当显示 div 时自动应用反弹效果，请告知如何做到这一点。

4

2 回答 2

0

我不能完全理解，但是如果您需要执行一些脚本以及该 div 块，您可以在 if 条件中嵌入一个脚本块。因此，只要您的条件为真，脚本就会被执行。

<c:if test="#{showGrowl==true}">
    <div id="growl">
        <span id="growl-title" class="growl-title"></span>
        <span id="growl-content" class="growl-content"></span>
    </div>
    <script>
        $(function(){ // Making an onload function
            $('#growl').bounceBoxToggle();
        })
    </script>
</c:if>
于 2013-07-18T11:00:15.693 回答
0

检查 div 是否存在：

$(function(){ /* onload */
    if($('#growl').length > 0)
      $('#growl').bounceBoxToggle(); 
});
于 2013-07-18T10:48:53.017 回答