1

jQueryとこの小さなプラグインの助けを借りて、いくつかの要素の color、background-color、border-color css プロパティをカラー サイクリングしています。

私はこれをやっています：

var currentColor = myRandNumber; // I get this variable from the main page
var myWebColors = [ '#49aea2', '#5da270', '#a1b144', '#ceb33d', '#ce812d',
'#c44e4e', '#ac4275', '#705f91', '#4d6791', '#5199a4' ];

window.setInterval( animateColor, 2000 ); // not using requestAnimationFrame
                                          // for browser compatibility

function animateColor() {

    $(".new-project-header, .button a:active,
    #logo, ul#menu-main-nav li a:active, ul#menu-main-nav li.contact a,
    ul#menu-main-nav li.contact a:visited, .footer-twitter,
    .footer-mail").animate(
        {
            backgroundColor: myWebColors[currentColor]
        }, "slow");

    $("a:hover, p a:hover, ul#menu-main-nav li.contact a:hover,
    h3.portfolio-item-title a:hover").animate(
        {
            color: myWebColors[currentColor]
        }, "slow");

    $("p a, p a:visited").animate(
        {
            borderColor: myWebColors[currentColor]
        }, "slow");

    if (currentColor == 9) { // the following cycles through the array
                             // in an endless loop
        currentColor = 0;
    } else {
        currentColor++;
    }
}

編集: jsfiddle HERE !

私が抱えている問題は、ホバーするp aとjQueryが色の循環を正常に行うが、マウスアウトするとリンクが:hover状態のままになり、循環した最新の色になることです。

にカーソルを合わせるとさらに悪化しul#menu-main-nav liます。にのみ適用する必要がある場合、 a:hover colorul#menu-main-nav li.contactを変更します。この後者のセレクターのようです：ホバー状態は前者のcssよりも優先されます。

多分私はonイベントですべてを手動で行う必要がありますか? たぶん、各ループステップの最後に :hover 以外のすべての状態を「リセット」する必要がありますか? たぶん、これはすべてやり過ぎなので、別のアプローチを試す必要がありますか?

ありがとう！

4

2 に答える 2

1

マウスが要素から出たら、状態をデフォルトに戻す必要があります。つまり、ホバーが完了します。

JQuery ホバーはこれを簡単に行うことができます。

$( "a" ).hover(
  function() {
    $( this ).animate({  color: myWebColors[currentColor] }, "slow");
  }, function() {
        $( this ).animate({  color: default_color }, "slow");
  }
);

好奇心から、ここで説明されているように CSS:hover プロパティを使用しないのはなぜ ですかhttp://www.w3schools.com/cssref/sel_hover.asp ?

于 2013-10-09T08:46:33.627 に答える