Question

此代码（位于此处http://jsfiddle.net/Svvift/Lhcaeboz/2/并在下方插入）非常适合制作动画导航栏。我现在唯一的愿望是如果未选择选项卡，滑块将返回其原始位置。目前，无论选择与否，它仍然只是坐在那里。

HTML

<div id="slider"></div>
<div id="red" class="item"></div>
<div id="blue" class="item"></div>
<div id="yellow" class="item"></div>
<div id="green" class="item"></div>

CSS

div {
    display: inline-block;
    float:left;
}

#red {
    background-color:#FF0000;
    height:100px;
    width:100px;
}

#blue {
    background-color:#0000FF;
    height:100px;
    width:200px;
}

#yellow {
    background-color:#E2BE22;
    height:100px;
    width:50px;
}

#green {
    background-color:#008800;
    height:100px;
    width:170px;
}
#slider{
    background-color:#6FF;
    height:10px;
    width:100px;
    position: absolute;
    left: 0;
    top: 0;
}

SCRIPT

$(document).ready(function(){
      $("#slider").animate({
          "left": $(".item:first").position().left + "px",
          "width": $(".item:first").width() + "px"
        }, 0);

    $(".item").hover(function(){
       $("#slider").stop(); $("#slider").animate({"left":$(this).position().left+"px","width":$(this).width()+"px"},500);
    });
});

这就是我试过的

$("#slider").delay(3000).animate({
    "left": $(this).position().left + "px",
    "width": $(this).width() + "px"
}, 500);

Answer 1

您是否尝试执行this之类的操作？

 $(".item").on( "mouseout",function(){
       $("#slider").stop(); 
       $("#slider").animate({"left":$('#red').position().left+"px","width":$('#red').width()+"px"},500);
    });

如果未选择选项卡，如何使滑块移回其原始位置

1 个答案: