https://jsfiddle.net/9harsfb6/
In jsFiddle file which I provided when you hover over menu item the red underlining appears ...then when you hover off and try to hover on again the red line does not appear....I want 1. the red line to appear under the given item each time I hover over it 2. after the hover to be able to animate smoothly from one element to the next which can also be seen in my jsfiddle demo I provided...BUT the thing is the whole thing works only on the first hover.
CSS:
<ul id="menu">
<li class="slider1"><a id="omnie" href="">o mnie</a></li>
<li class="slider2"><a id="oferta" href="">oferta</a></li>
<li class="slider3"><a id="etyczny" href="">kod etyczny</a></li>
<li class="slider4"><a id="referencje" href="">referencje</a></li>
<li class="slider5"><a id="kontakt" href="">kontakt</a></li>
</ul>
JQuery:
$(document).ready(function() {
$('ul').on('mouseenter', function() {
$('body').prepend( '<div id="object1"></div>' );
});
$('ul#menu').mouseleave(function () {
$('div#object1').fadeOut(300, function() { $(this).remove(); }) ;
});
});
$(document).ready(function(e) {
var i=1;
$('ul#menu li.slider1').on({
mouseenter: function(e) {
if(i<2) {
$('div#object1').css('position', 'absolute');
$('div#object1').css('width', '100px');
$('div#object1').css('height', '5px');
$('div#object1').css('right', 620); //or wherever you want it
$('div#object1').css('top', 75);
$('div#object1').fadeIn(1000);
i++;} else {
$('div#object1').css('position', 'absolute');
$('div#object1').css('width', '100px');
$('div#object1').css('height', '5px');
$('div#object1').stop().animate( {right:620, top:75, opacity:1}, 700);
}
}
});
$('ul#menu li.slider2').on({
mouseenter: function(e) {
if(i<2) {
$('div#object1').css('position', 'absolute');
$('div#object1').css('width', '100px');
$('div#object1').css('height', '5px');
$('div#object1').css('right', 480); //or wherever you want it
$('div#object1').css('top', 75);
$('div#object1').fadeIn(1000);
i++;} else {
$('div#object1').css('position', 'absolute');
$('div#object1').css('width', '100px');
$('div#object1').css('height', '5px');
$('div#object1').stop().animate( {right:490, top:75, opacity:1}, 700);
}
}
});
});
Your i variable never gets reset, so the initialisation you are doing to the div in the if (i <2) blocks never gets rerun after the div is removed and re-prepended.
The minimal change to your current code to fix that would be to combine both of your document ready handlers (which you should do anyway) so that all of your functions have access to the same i variable, then in your ul element's mouseleave handler reset i to 1. Demo: https://jsfiddle.net/9harsfb6/3/ (Note also how much easier the code is to read after I clicked the "Tidy" button?)
Your code could be simplified quite a bit though: seems you are setting the same properties on the div to the same values in several places. You could move all of that out of the JS and into the CSS. You could include the div in the page html to start, instead of appending and removing it. And you could hide it by having the ul element's mouseout event handler trigger the .slider1 element's mouseenter. Something like this: https://jsfiddle.net/9harsfb6/5/
// JS that works with the div in the page html and all the
// positioning and size nonsense in the CSS:
$(document).ready(function() {
$('ul#menu').mouseleave(function() {
$('ul#menu li.slider1').trigger('mouseenter');
});
$('ul#menu li.slider1').on({
mouseenter: function(e) {
$('div#object1').stop().animate({
right: 620,
opacity: 1
}, 700);
}
});
$('ul#menu li.slider2').on({
mouseenter: function(e) {
$('div#object1').show().stop().animate({
right: 490,
opacity: 1
}, 700);
}
});
});