0

Webページのヘルプ（強調表示とチュートリアルの手順）jQueryプラグインの作成を開始しました。ここで最新の結果を見ることができます。

http://goo.gl/ZZ2xy

私が最初にハイライトするのは、cssトランジションによって移動する4つのオーバーレイdivを作成することです。シンプルですが完璧ではありません。少なくともChromeでは、オーバーレイ要素の間にスペースラインを作成します。

このアニメーションを作成するための最良の方法は何でしょうか？

4

3 に答える 3

1

私はあなたのためのより良い解決策を持っています。これは概念の問題であり、明らかに微調整が必​​要ですが、一般的には機能します。アイデアは、オーバーレイとしてテーブル3x3を使用し、ターゲットのhtml要素を見ているウィンドウとして機能すると想定されるセルを除くすべてのセルに半透明の背景を使用することです。

ブラウザにはいくつかの癖があるかもしれませんが（おそらく修正可能）、それでも現在使用しているものよりもクリーンで優れたオプションです。

サンプルコードはこちらから入手できますhttp://jsbin.com/ekijev/4

于 2012-11-16T13:14:07.887 に答える
0

jQuery .css（）メソッドを使用すると、状況が大幅に改善されました。それでも時々白い線がありますが、それは私にとっては大丈夫です。githubですでに更新されています。

年：

$elem.css({"left" : x})
   .css({"top" : y}) 
   .width(width)
   .height(height);

新しい

$elem.css({
            "left" : x,
            "top" : y,
            "width" : width,
            "height" : height
});
于 2012-11-16T12:25:53.530 に答える
-1

だから私はあなたのためのフェードソリューションを持っています。基本だけですが、あなたを助けるのに十分なはずです。

コードをメモ帳ファイルに貼り付けて保存して実行するだけです

コードが更新されました

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <style>
    DIV{
        width:200px;
        height:200px;
        display:inline-block;
    }
    .black{
        background:black;
    }
    .yellow{
        background:yellow;
    }
    .red{
        background:red;
    }
    .green{
        background:green;
    }
    </style>
</head>
<body>
    <div id="container">
        <div id="1" class="yellow"></div>
        <div id="2" class="black"></div>
        <div id="3" class="red"></div>
        <div id="4" class="green"></div>
    </div>
</body>
<script>
    $(document).ready( function (){
        var target = 2;//id of element we dont want faded
        var pageElements = $('#container').find('*').toArray();//get all elements in our container
        for(var counter = 0; counter < pageElements.length;counter++){//itterate through them
            if(pageElements[counter].id != target){//if element is not our target fade
                $(pageElements[counter]).fadeOut("slow",OnFadeComplete);//fade

            }
        }
    });

    function OnFadeComplete(){
        $(this).attr('style','visibility:hidden;');
    }
</script>

于 2012-11-16T11:33:19.710 に答える