10

最初にmouseenterで境界線を5px太くし、次にmouseleaveで境界線を5px小さくして、divをアニメーション化したいのですが、トリッキーな部分は、divが動いているように見せたくないということです（境界線をアニメーション化するだけの場合） 、境界線が太くなったり細くなったりするだけでなく、div全体がシフトしているように見えます）。私は非常に近いですが、最後の部分であるマウスリーブで立ち往生しています。私がこれまでに持っているのは：

$("#thumbdiv<%=s.id.to_s%>").bind({
            mouseenter: function(){
                $(this).animate({
                    borderRightWidth: "25px",
                    borderTopWidth: "25px",
                    borderLeftWidth: "25px",
                    borderBottomWidth: "25px",

                    margin: "-5px"
                }, 500);
            },
            mouseleave: function(){

                $(this).animate({
                    borderRightWidth: "20px",
                    borderTopWidth: "20px",
                    borderLeftWidth: "20px",
                    borderBottomWidth: "20px",

                    margin: "0px"
                }, 500);
            }
        });

この前のどこかで境界線を20pxに設定しましたが、マージンが設定されていないため、0pxになります。divはmouseenterでうまくアニメーション化され、divが実際にずれることなく境界線を太くすることができますが、mouseleaveがトリガーされると、divは最初に「margin-5px」が呼び出されなかったかのように自分自身をその位置に再配置します、次に境界線をゆっくりと減らします。「magin：'0px'」は実際には呼び出されていないようです。

私の説明が理にかなっているかどうかはわかりませんが、必要に応じてプロトタイプを作成できます。

4

4 に答える 4

7

私はコード全体を読んだわけではありませんが、あなたがやりたいことをするためのより良いアプローチがあると思います。

これは「アウトライン」cssプロパティです。

仕様にあるように、「...ボックスの位置やサイズに影響を与えません......リフローやオーバーフローを引き起こしません...」

http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines

コードは次のようになります。

jQuery(#thumbdiv<%=s.id.to_s%>").mouseenter( function() {
jQuery(this).css("outlineStyle", "solid").animate({
    'outlineWidth': '5px'
}, 500);
}).mouseout( function() {
jQuery(this).animate({
    'outlineWidth': '0px'
}, 500).css("outlineStyle", "solid");
});

ノート：

OK、@ Nabab "Fiddle"を編集し（そのサービスについては知りませんでした）、次のように取得しました：http://jsfiddle.net/EbTms/ ...動作すると思います。

于 2011-06-11T04:02:33.833 に答える
6

だから私は最終的に私自身の答えを見つけました。私が望んでいたことを繰り返します：

  1. 円形の div
  2. ボーダー幅が増加するアニメーション
  3. div を「動いている」ように見せたくありません。動く部分は境界線だけにする必要があります。

マージンとボーダーの両方を同時にアニメーション化することでこれを達成しました。境界線をアニメーション化すると、div全体がシフトするためです。しかし、ボーダーを増やすと同時にマージンを減らすと、div が静止しているように見えます。

簡単に言うと、循環 div があります。

#somediv {
    display: inline-block;
    height: 200px;
    width: 200px;
    border: solid 0px;
    vertical-align: middle;
    border-radius: 2000px;
    background-color: #ccc;
    margin: 0px;
}

そして、次のような JQuery 関数を使用します。

$(function(){
    $("#somediv").mouseover(function(){
    $(this).animate({"borderLeftWidth" : "5px",
                     "borderRightWidth" : "5px", 
                     "borderTopWidth" : "5px", 
                     "borderBottomWidth" : "5px",

                     "marginLeft" : "-5px",
                     "marginTop" : "-5px",
                     "marginRight" : "-5px",
                     "marginBottom" : "-5px"
                    }, 300);
    }).mouseout(function(){
        $(this).animate({"borderLeftWidth" : "0px", 
                         "borderRightWidth" : "0px", 
                         "borderTopWidth" : "0px", 
                         "borderBottomWidth" : "0px",

                         "marginLeft" : "0px",
                         "marginTop" : "0px",
                         "marginRight" : "0px",
                         "marginBottom" : "0px"
                        }, 300);
    });
});

私たちは望むものを達成することができます。

例として このフィドルをチェックしてください。

ここで、議論すべきもう 1 つの問題があります。マウスが実際に div 内の円形要素の上にある場合にのみ境界線をアニメーション化できるようにしたいのです。これは、目に見えない div ボックスの角にマウスを合わせると、円がアニメーション化されるためですが、それは私たちが望んでいることではありません。後でこれを達成する方法へのリンクを投稿します。

于 2011-06-16T01:26:02.150 に答える
3

OK、これは困難になりました。

divが循環していることを念頭に置いて：

すべてのdivにラッパー（別のdiv）を使用し、それらよりも大きく、divをラッパー（垂直方向および水平方向）の中央に「インラインブロック」として配置してから、アニメーション化します。

うまく機能するには、すべての境界線を個別にアニメーション化する必要があります（ "borderWidth"だけでなく、 "borderLeftWidth"、 "borderRightWidth"など）。これは、jQueryで十分に文書化されていないバグです：http：//bugs.jquery.com/ticket/7085（発見するのは困難でした）。

動作しているようです：http：//jsfiddle.net/y4FTf/2/

HTML

<div class="wrapper">
<div class="content">Hello World!
</div>
</div>
<div class="wrapper">
<div class="content">Foo Bar
</div>
</div>

CSS

.wrapper {
width: 210px;
height: 210px;
line-height: 210px;
text-align: center;
padding: 0px;
}
.content {
display: inline-block;
height: 200px;
width: 200px;
border: solid 0px;
vertical-align: middle;
border-radius: 2000px;
background-color: #ccc;
margin: 0px;
}

Javascript

$(function(){
$(".content").mouseover(function(){
    $(this).animate({"borderLeftWidth" : "5px",
                     "borderRightWidth" : "5px",
                     "borderTopWidth" : "5px",
                     "borderBottomWidth" : "5px"
                    }, 300);
}).mouseout(function(){
        $(this).animate({"borderLeftWidth" : "0px",
                         "borderRightWidth" : "0px",
                         "borderTopWidth" : "0px",
                         "borderBottomWidth" : "0px"
                        }, 300);
});
});
于 2011-06-14T02:43:46.707 に答える
0

興味深い問題...クラスを切り替えることでうまく機能しますが、それでもあまりスムーズではありません:

http://jsfiddle.net/dzTHB/13/

于 2011-06-11T03:50:56.033 に答える