1

jquery.colorを使用した単純なカラー アニメーションがあります。これは私のコードです:

$(document).ready(function(){
    $('.fx_link').bind({
        mouseenter: function(e) {
            $(this).attr('originalColor', $(this).css('color'));
            $(this).animate({ color: "#999999" }, 'fast');
        },
        mouseleave: function(e) {
            $(this).animate({ color: $(this).attr('originalColor') }, 'fast');
            $(this).removeAttr('originalColor');
        }
    });
});

そして、それはかなり良いです。ただし、アニメーションはメニュー項目用です。マウスがアイテム上にある場合、アニメーションが開始されます。次に、マウスをクリックすると、ページが更新されます。マウスはリンクにありますが、動きません。マウスが 1 ピクセルだけ移動するとすぐに、mouseenter イベントが発生し (マウスが既にリンク上にある場合でも)、バグと見なされるアニメーションが表示されます。

次のようなものが必要です。

$(this).bind({ mouseenter: function(e) {

    if( __ mouse is not already over $(this) __ ) 

        $(this).animate(...); } });

私はmouseenter、mouseoverでいくつかの状態を設定しようとしましたが..どうしようもありません

編集：

完全な例。これを名前を付けて保存h.html

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.0.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('.fx_link').bind({
        mouseenter: function(e) {
            console.log("enter");
            $(this).attr('originalColor', $(this).css('color'));
            $(this).animate({ color: "#999999" }, 'fast');
        },
        mouseleave: function(e) {
        
            console.log("leave");
            $(this).animate({ color: $(this).attr('originalColor') }, 'fast');
            $(this).removeAttr('originalColor');
        
        }
    });
});


</script>
<body>

<a class="fx_link" href="h.html">this is a link</a>

</body>
</html>
4

2 に答える 2

2

申し訳ありませんが、私は携帯電話を使用しているため、コードが間違っている可能性があります（テストされていません）。

編集済み（そして今すぐテスト済み）

// fix: bind mousemove to document, not links, sorry!
$(document).bind('mousemove', function(event) {
    $('.fx_link').bind('mouseenter', function(event) {
         //....
    }
    $(this).unbind(event);
});

編集済み

  • 2つの異なるマウスを処理する完全な例[ページの更新時]マウスがすでにリンクの内側にある場合（色を設定するだけ）、外側から来る場合（アニメーションの色）に1つ入力します。

  • 開始時にすべてのリンクにoriginalColorsを設定することにより、originalColorsのバグを修正しました。

  • 匿名関数の代わりに名前付き関数を使用したため、バインドを簡単に解除できました（さらに明確に見えます）。

コードは次のとおりです。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.0.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    var $links=$('.fx_link');

    // save ALL originalColors so they are fixed forever
    $links.each(function() {$(this).attr('originalColor', $(this).css('color'));});

    $(document).bind('mousemove', handleMove);
    $links.bind('mouseenter', firstMouseEnter);
    $links.bind('mouseleave', anyMouseLeave);

    function handleMove(event) { // When mouse moves in document
        console.log("first move - setting up things..");
        $(document).unbind('mousemove',handleMove); // remove myself (no need anymore)
        $links.bind('mouseenter', otherMouseEnter); // istall second mouseenter
        $links.unbind('mouseenter',firstMouseEnter); // remove first mouseenter
    }

    function firstMouseEnter(event) { // Called before mouse is moved in document
        console.log("first enter");
        $(this).css('color','#999');
    }

    function otherMouseEnter(event) { // Called after mouse is moved in document
        console.log("other enter");
        $(this).animate({ color: "#999" }, 'fast');
    }

    function anyMouseLeave(event) {
        console.log("leave");
        $(this).animate({ color: $(this).attr('originalColor') }, 'fast');
    }

});


</script>
<body>

<a class="fx_link" href="h.html">this is a link</a>

</body>
</html>
于 2012-12-16T23:02:26.020 に答える
1

これのポイントは、「fx_link」のクラスを持つメニュー項目を、ホバーしたときに別の色にフェードすることですか? その場合、ほとんどの場合、.fx_link:hover で css3 トランジションを使用できます。その後、必要に応じてトランジションをカスタマイズできます。

a.fx_link{
color:red;
-webkit-transition-property: color;
  -webkit-transition-duration: 2.5s;
  -webkit-transition-timing-function: linear;
  -moz-transition-property: background color;
  -moz-transition-duration: 2.5s;
  -moz-transition-timing-function: linear;
  -o-transition-property: color;
  -o-transition-duration: 2.5s;
  -o-transition-timing-function: linear;
  -ms-transition-property: background color;
  -ms-transition-duration: 2.5s;
  -ms-transition-timing-function: linear;
  transition-property: color;
  transition-duration: 2.5s;
  transition-timing-function: linear;    
}

a.fx_link:hover{
    color:blue;
-webkit-transition-property: color;
  -webkit-transition-duration: 2.5s;
  -webkit-transition-timing-function: linear;
  -moz-transition-property: background color;
  -moz-transition-duration: 2.5s;
  -moz-transition-timing-function: linear;
  -o-transition-property: color;
  -o-transition-duration: 2.5s;
  -o-transition-timing-function: linear;
  -ms-transition-property: background color;
  -ms-transition-duration: 2.5s;
  -ms-transition-timing-function: linear;
  transition-property: color;
  transition-duration: 2.5s;
  transition-timing-function: linear;
}

</p>

于 2012-12-16T22:49:49.577 に答える