0

疑似クラスがアクティブ化されたときにアニメーション化することは可能ですか？次に例を示します。

私は私のCSSで次のことをしなければなりません：

#gallery a span {
    border:#006553 3px solid;
    position:relative;
    overflow:hidden;
    display:block;
    top:0px;
    left:0px;
    height:89px;
    width:89px;
}

#gallery a:hover span {
    border:#f3bd2f 6px solid;
    position:relative;
    overflow:hidden;
    display:block;
    top:0px;
    left:0px;
    height:83px;
    width:83px;
}

ユーザーがリンクにカーソルを合わせたとき、つまりスパンの境界線を大きくする必要があるときに、変換をアニメーション化したいと思います。

これが可能であれば誰かいますか？

前もって感謝します。

// 編集：

'animateToSelector' jQueryプラグインを確認し、次のjQuery関数呼び出しを使用しましたが、アニメーションがなく、境界線が上記の指定されたスタイル間をジャンプするだけです。

これが私の関数呼び出しです：

$("#gallery a span").animateToSelector({selectors: ["#gallery a:hover span"], properties: ['border'], events: ['mouseover','mouseout'], duration: 3000});

誰かが私が欠けているものを見ることができますか？

4

3 に答える 3

3

James Paolseyによるこの記事は、そのような変革を実現するのに役立つかもしれません。

于 2009-07-24T13:00:11.800 に答える
1

jQuery UIは、あるクラスから別のクラスに要素をアニメーション化するような関数を提供します

$(".gallery a").mouseover(function(){  
  $(this).switchClass('newClass', 'anotherNewClass', 1000);
})
于 2009-07-24T13:04:49.540 に答える
0

マウスオーバーでアニメーションをバインドしないのはなぜですか？

$("#gallery a").mouseover(function(){
  var span = $(this).children("span");
  //animate something on the span
});
于 2009-07-24T13:00:04.127 に答える