3

1 ページャーで上部の固定リスト ナビゲーションを取得しましたが、正常に動作します。

jQuery カラー プラグインを使用して mouseenter と mouseleave のカラー アニメーションを追加しましたが、これも問題なく動作します。

リンクがクリックされた場合、マウスリーブをスキップしたいのですが、取得できません。ここで見つけたすべてを試しましたが、まだ気に入った結果はありません。私は本当に新しいJavaScipt / jQueryなので、初心者向けに説明できれば親切です;)。

私のナビゲーションhtmlコード:

<nav>
    <ul>
        <li class="xyz"><a href="#home" class="scroll">Home</a></li>
        <li class="xyz"><a href="#leistungen" class="scroll">Leistungen</a></li>
        <li class="xyz"><a href="#referenzen" class="scroll">Referenzen</a></li>
        <li class="xyz"><a href="#me" class="scroll">Über Mich</a></li>
        <li class="xyz"><a href="#kontakt" class="scroll">Kontakt</a></li>
    </ul>
</nav>

ここに私のjQueryコード：

$(function() {

$('ul li a.scroll').on('mouseenter', function() { //Wenn Maus über .teaser
    $(this).stop().animate({
        'color': 'white',
        'background-color': '#468592',
    }, 400);
});

$('ul li a.scroll').on('mouseleave', function() {
        $(this).stop().animate({
            'color': '#666666',
            'background-color': 'white',
    }, 400);
});

$('ul li a.scroll').click(function(event) {
    $('.scroll').removeClass('active');
    $(this).addClass('active');
    event.preventDefault();
    $('html,body').stop().animate({
        scrollTop: $(this.hash).offset().top
    }, 1000);

});

});

この問題で私を助けてくれますか? 2日間試してみましたが、結果はまだありません。

よろしくお願いします、 mkr*

4

3 に答える 3

1

マウスリーブでは、「アクティブな」クラスが要素に存在するかどうかを確認するだけで、何もしません。

$('ul li a.scroll').on('mouseleave', function() {
    if($(this).hasClass("active"))
        return; // do nothing because it's active
    $(this).stop().animate({
            'color': '#666666',
            'background-color': 'white',
    }, 400);
});

EDITこれは、作り直されたCSS + JSソリューションです。CSS :hover と CSS3 transition は mouse[enter/leave] 効果に使用され、JS はクリックの切り替えに使用されます。

http://jsfiddle.net/tdV2g/

IE9 では 0.4 秒のカラー トランジションは得られませんが、最新のすべてのブラウザーでは機能します。

CSS

a.scroll {
    background-color: white;
    color: #666666;
transition: background-color 0.4s linear, color 0.4s linear;
-moz-transition: background-color 0.4s linear, color 0.4s linear;
-o-transition: background-color 0.4s linear, color 0.4s linear;
-webkit-transition: background-color 0.4s linear, color 0.4s linear;
-ms-transition: background-color 0.4s linear, color 0.4s linear;
}
.scrollactive, a.scroll:hover {
    background-color: #468592;
    color: white;
}

JS (jQuery)

$("a.scroll").click(function(event) {
    $(".scrollactive")
        .removeClass("scrollactive")
        .addClass("scroll");
    $(this)
        .removeClass("scroll")
        .addClass("scrollactive");
    event.preventDefault();
    $('html,body').stop().animate({
        scrollTop: $(this.hash).offset().top
    }, 1000);
});
于 2013-02-11T15:17:32.683 に答える
1

単純に追加

$(this).unbind('mouseleave');

あなたの中に$('ul li a.scroll').click({ .. });

于 2013-02-11T15:19:41.397 に答える
0

これを試して、

$('ul li a.scroll').on('mouseenter', function() { //Wenn Maus über .teaser
  $(this).stop().animate({
    'color': 'white',
    'background-color': '#468592'
  }, 400);

});

$('ul li a.scroll').on('mouseleave', function() {
    $(this).stop().animate({
        'color': '#666666',
        'background-color': 'white'
}, 400);

});


$('ul li a.scroll').one('click', function () {
  // If you want to stop mouseleave on every anchor tag
  $('ul li a.scroll').unbind('mouseleave');  
  // If you want to stop mouseleave for that specific anchor tag
  // $(this).unbind('mouseleave'); 
});
于 2013-02-11T15:30:00.110 に答える