Jquery

Question

在我提供的 jsFiddle 文件中，当您将鼠标悬停在菜单项上时，会出现红色下划线……然后当您将鼠标悬停并再次尝试将鼠标悬停在上面时，红线不会出现……我想要 1.每次我将鼠标悬停在给定项目下方时都会出现红线 2. 悬停后能够从一个元素平滑地动画到下一个元素，这也可以在我提供的 jsfiddle 演示中看到...但问题是整个事情只在第一次悬停时有效。

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);


                    }
                }       
    });     
});

Answer 1

你的 i 变量永远不会被重置，所以你在 if (i <2) 块中对 div 所做的初始化在 div 被删除后永远不会重新运行并且重新添加。

要解决此问题，对当前代码的最小更改是将两个文档就绪处理程序组合起来（无论如何您都应该这样做），以便您的所有函数都可以访问相同的 i 变量，然后在您的 ul 元素的 mouseleave 处理程序中将 i 重置为 1。演示：https://jsfiddle.net/9harsfb6/3/（另请注意，单击 "Tidy" 按钮后代码更容易阅读？）

不过您的代码可以简化很多：您似乎在 div 上的多个位置将相同的属性设置为相同的值。您可以将所有这些移出 JS 并移入 CSS。您可以在页面 html 中包含 div 来开始，而不是附加和删除它。您可以通过让 ul 元素的 mouseout 事件处理程序触发 .slider1 元素的 mouseenter 来隐藏它。像这样：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);
    }
  });
});

Answer 2

使用这样的计数器来确定您的函数需要做什么通常不是一个好主意。一个简单的解决方案是用布尔值替换您的计数器，并在您的函数中检查并相应地设置它的值，然后合并您的两个 document.ready 函数，如下所示：

$(document).ready(function () {

    var hidden = true;

    $('ul').on('mouseenter', function () {
        $('body').prepend('<div id="object1"></div>');
    });

    $('ul#menu').mouseleave(function () {
        $('div#object1').fadeOut(300, function () {
            $(this).remove();
            hidden = true;
        });
    });

    $('ul#menu li.slider1').on({

        mouseenter: function (e) {

            if (hidden) {
                ...

                hidden = false;
            } else {

            }
        }
    });

此外，您无需在每次悬停时都删除 prepend/append 您的 div。

Jquery - If/else 迭代语句只工作一次/在删除 div 并再次添加它之后它不起作用

Jquery - If/else statement with iteration works only once/ after the div is removed and prepended again it does not work

iteration

if-statement

mouseenter