0

更新: 解決策が見つかりました。以下を参照してください。

クリックされたタイル div を取得して、縮小/拡大のトランジションをすばやく実行しようとしているため、タイルがクリックされたというフィードバックがユーザーに表示されます。これは CSS3 アニメーションで簡単に実行できることがわかりましたが、IE8/9 で動作するように jQuery の代替が必要です。

jQueryUI effect('scale') は良いオプションのようです。タイルには重要なテキスト コンテンツがあり、幅/高さ/上部/下部に animate() を使用するだけでは、そのコンテンツはスケーリングされず、一緒に押しつぶされるだけなので、これは見栄えがよくなります。

クリックしたタイルが縮小フェーズと拡大フェーズの間でジャンプすることを除いて、機能するサンプルがあります。少しジャンプせずにタイルを元に戻す方法についての提案を探しています。

これが私の作業サンプルです（申し訳ありませんがjsFiddleはありません-これはそこでは機能しないようです）：

div 
{ 
    margin: 0px;  
    background: green; 
    border: 10px solid black; 
    color: white;

    width: 250px;
    height: 250px;

}

body 
{
    margin: 20px;
}


$(document).ready(function() {

$("div").click(function () {

    $(this).effect("scale", {percent: 90, origin: ['middle','center']}, 125, 
        function () {

            $(this).effect("scale", {percent: 111, origin: ['middle','center']}, 125);
          });
    });   
});


    <div><h1>hi</h1><p>blah</p></div>

jQueryUI の内部を見ると、ラッパー div が適用されて何かが起こっていると推測されますが、それは私を少し超えています。助言がありますか？

これは、望ましい外観を示す私の CSS3 効果の jsFiddle です: http://jsfiddle.net/dex3703/n2RJs/

ありがとう！

4

2 に答える 2

0

解決策を見つけました-divが縮小された後、正しいレイアウト属性を持つクラスを追加し、それをスケールアップします。CSSに比べると醜いですが、ボタンをクリックするだけですばやく移行できます。縮小が正確に2倍になっても元のサイズに戻らないため、奇妙なことに丸めが行われている必要があります。よく見ない限り、111％にすると問題ありません。

提案やコメントをいただければ幸いです。

.inner
{ 
    position: absolute; 
    margin: 0px;  
    background: green; 
    border: 10px solid black; 
    color: white;


    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.innerpostmove
{
    position: absolute; 
    top: 11px;
    bottom: 11px;
    left: 11px;
    right: 11px;

}

body { margin: 20px;}

.container 

{
    position: relative; 
    width: 250px; 
    height: 250px;
    background: purple;
}

    $(".inner").mousedown(function () {

      $(this).effect("scale", {percent: 90, origin: ['middle','center']}, 100, function () {

        var item = $(this).addClass("innerpostmove");

        setTimeout(function () {
            item.effect("scale", {percent: 111, origin: ['middle', 'center']}, 100);
        }, 100);

        setTimeout(function () {
            item.removeClass('innerpostmove');
        }, 200);

      });

    }); 


<div class="container">
    <div class="inner" ><h1>hi</h1><p>blah</p></div>
</div>
于 2012-04-19T17:49:55.350 に答える
0

スケールをアニメーション化する代わりに、div の幅と高さをアニメーション化することもできます。

$(this).animate({

    "width": "-=10",
    "height": "+=10"

}, 200, function() {

    "width": "+=10",
    "height": "+=10"

});

私もこの問題を抱えていました。これがどのように見えるかのデモです: 四角をクリックしてください: My Site

于 2012-04-17T17:47:56.817 に答える