1

ボーダーアニメーションをホバーしようとしています。しかし、私はアニメーションを取得していません、

これが私のコードです。手伝ってくれませんか。 

$(".divBox1").mouseover(function(){
        console.log('enter');
        $(this).animate({border: "3px solid #000"}, 100);
    }).mouseout(function(){
            console.log('out');
            $(this).animate({border: "3px solid #FFF55B"}, 100);
    });
4

6 に答える 6

3

これを試して、境界プロパティに引用符を追加してください

$(".divBox1").mouseover(function(){
    //console.log('enter');
    $(this).animate({"border": "3px solid #000"}, 100);
}).mouseout(function(){
    //console.log('out');
    $(this).animate({"border": "3px solid #FFF55B"}, 100);
});
于 2013-03-06T05:55:32.870 に答える
1

cssボーダープロパティを二重引用符で囲んでみてください

于 2013-03-06T05:59:56.640 に答える
0

簡単にCSSで試してみてください

  .divBox1{
 border: 3px solid #FFF55B;
}

.divBox1:hover {
        border: 3px solid #000;
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            -ms-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
        }
于 2013-03-06T06:03:37.133 に答える
0

このような静的な境界線をアニメートすることはできません。Uはcss3のborder-imagesで操作できます。

その他のクエリについては、このリンクを参照してください

このプラグインもご覧ください

于 2013-03-06T06:04:36.427 に答える
0

を使用する必要がjQueryあり、jQuery ui両方を使用する必要がありますanimating colors。あなたのコードはそれを示唆しているのでyou just want to animate colors not the width、アニメーションの幅はで達成することができます

borderWidth: '3px'

css：

.divBox1 {
   border:solid 3px #FFF55B;
}

脚本：

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
 <script>
     $(function(){
         $(".divBox1").mouseover(function () {
             $(this).animate({borderColor: "#000"}, 800);
         }).mouseout(function () {
             $(this).animate({borderColor: "#FFF55B"}, 800);
         });
     });
 </script>

ここでフィドルで試してみてください

ノート：

これがないjquery uiと、まったく機能しません。

于 2013-03-06T06:08:34.227 に答える
0

これはあなたが望むものですか？

    $(".divBox1").css("border","3px solid transparent").mouseover(function(){
        //console.log('enter');
        $(this).animate({"border-color": '#000'}, 100);
    }).mouseout(function(){
        //console.log('out');
        $(this).animate({"border-color": "#FFF55B"}, 100);
    });

ノート：

jQueryUIが必要です

于 2013-06-08T16:11:50.803 に答える