2

JQueryでこの効果を達成する方法があるかどうか疑問に思っています。最近、stackoverflow ユーザーが、私が目指していた効果を達成するのを手伝ってくれました。今は JQuery を使用して、可能な限り最も効率的な方法でそれを行いたいと考えています。私が達成しようとしていることのより良い説明のためのフィドルへのリンクは次のとおりです。

http://jsfiddle.net/itsbc/U3Lg9/11/

現在のバージョンは少し不安定です。次のような、もう少しスムーズなものを探しています。

http://jsfiddle.net/itsbc/QchfJ/

前もってありがとう、BC。

4

3 に答える 3

1

コメントセクションで他に提案されているように、パフォーマンスの面で持っているものを使用する方が良いでしょう。スライドアニメーションだけの場合は、単に持っているものに固執する必要があります。

しかし、あなたが本当に欲しいのはですslideDown animation + hide effect。通常、slideDownアニメーションは要素を表示するためのものです。したがって、これを機能させるには少しトリックを行う必要があります。以下を参照してください。

CSS：

#hider1 { 
   position:fixed; /* Changed style*/
   top: 0px;       
   background: black;
   width:100%;
   height:48%;
   min-height:0px;
   text-align:center;
   color:white; 
}

#hider2 { 
   background-color:black;
   width:100%;
   height:50%;
   text-align:center;
   position:fixed;  /* Changed style*/
   bottom:0;        /* Changed style*/
   color:white; 
}

JS：

$(function () {
    $('#test').on('click', function () {
        $('#hider1').animate({            
            height: 0,
            opacity: 0.2 //<-- Fancy stuff
         },1000 );

        $('#hider2').animate({            
            height: 0,
            opacity: 0.2 //<-- Fancy stuff
         },1000 );

    });
});

<br> デモ->FFとChromeで確認済み。

于 2012-05-23T21:30:48.003 に答える
1

わかりましたので、既存のコードを少しリファクタリングしました。jQuery 呼び出しはこれと同じくらい簡単です。

$("#opener").click(function() {
    myApp.websiteOpener.displayWebsite('hider1', 'hider2');
});

次に、そこから、必要なコードを含む別のファイルが作成されます。

var myApp = {};
myApp.websiteOpener = {

    up: null,
    down: null,
    topPanel: null,
    bottomPanel: null,

    displayWebsite: function(tPanel, bPanel) {
        if (typeof up !== "undefined") return;
        topPanel = tPanel;
        bottomPanel = bPanel;
        up = setInterval(this.goUp, 2);
        down = setInterval(this.goDown, 2);
    },

    goUp: function(x) {
        var h1 = document.getElementById(this.topPanel);
        if (h1.offsetHeight <= 0) {
            clearInterval(up);
            return;
        }
        h1.style.height = parseInt(h1.style.height) - 1 + "%";
    },

    goDown: function(x) {
        var h2 = document.getElementById(this.bottomPanel);
        if (h2.offsetHeight <= 0) {
            clearInterval(down);
            return;
        }
        h2.style.top = parseInt(h2.style.top) + 1 + "%";
        h2.style.height = parseInt(h2.style.height) - 1 + "%";
    }
};​

自分で試してみてください

于 2012-05-23T21:50:42.657 に答える
0

jQuery を使用しない方が、使用するよりもはるかに効率的である可能性があります。

おそらく、本当に変更したい理由は、アニメーションをより細かく制御するためです (たとえば、アニメーションの速度やイージングなど)。その場合は、これを試してください：

http://jsfiddle.net/U3Lg9/13/

于 2012-05-23T21:49:12.200 に答える