3

我在一个寻呼机中有一个顶级固定列表导航，工作正常。

我用 jQuery 颜色插件添加了 mouseenter 和 mouseleave 颜色动画，效果也很好。

现在我想跳过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);

});

});

你能帮我解决这个问题吗？我现在试了两天还是没有结果。

问候和感谢，mkr*

4

3 回答 3

1

在您的 mouseleave 中，您只需要检查元素上是否存在“活动”类并且什么都不做。

$('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);
});

编辑这是一个重新设计的 CSS + JS 解决方案。CSS :hover 和 CSS3 过渡用于鼠标[进入/离开]效果，而 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 回答