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 条件内にスクリプト ブロックを埋め込むことができます。したがって、条件が true になるたびに、スクリプトが実行されます。

<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 に答える