One pager - jQuery - mouseenter and mouseleave - skip mouse if clicked
I got fixed list top nav in one pager, works great.
I added mouseenter and mouseleave color animations with jQuery color plugin, works great too.
Now I want to skip the mouseleave if the link is clicked, but I don't understand. I tried everything I found here, but I still didn't like any result. I am really new JavaScipt / jQuery so it would be nice if you could explain it to a newbie;).
My html navigation code:
<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>
My jQuery code is here:
$(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);
});
});
Can you help me with this problem? I tried this two days later but with no result.
With respect and gratitude, MKR *
source to share
In your mouse hand, you just need to check if the "active" class exists on the element and do nothing.
$('ul li a.scroll').on('mouseleave', function() {
if($(this).hasClass("active"))
return; // do nothing because it active
$(this).stop().animate({
'color': '#666666',
'background-color': 'white',
}, 400);
});
EDIT Here's a reworked CSS + JS solution. CSS: hover and CSS3 transitions are used for the [enter / leave] mouse effect, while JS is used for toggling clicks.
You won't get a 0.4 second transition in IE9, but it will work in all modern browsers.
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);
});
source to share
Try it,
$('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');
});
source to share