Question

小提琴： https://jsfiddle.net/r73b14y5/3/

脚本工作正常但如果没有点击其他链接，则无法将图像滑回原始位置。

此时图片停留在最后一次悬停的位置，而不是仅在点击新链接时停留在链接上。如果没有点击任何内容，则滑回原始链接。

还有什么是延迟悬停状态的最佳方法，因为鼠标快速飞过元素，它不会激活。悬停意图。

HTML：

<div class="bblock1" style="height:100%;">
<div class="container">
<div class="bodymainMaxS">
    <div class='tabbed_content'>
        <div class='tabs'>
            <div class='moving_bg'>&nbsp;</div>
            <span class='tab_item tab_item_color'>OVERVIEW</span>
            <span class='tab_item'>THE SCIENCE</span>
            <span class='tab_item'>ORDER</span>
            <span class='tab_item'>REPLACEMENT FILTERS</span>
        </div>
</div>
</div>
</div>
<div class="bblock3" style="height:100%;">
<div class="container">
<div class="bodymainMaxS">

</div>
</div>
</div>

**脚本的关键部分：**

$(".tab_item").mouseover(function() {
            var $this = $(this);
            $this.parent().find(".moving_bg").stop().animate({
                left: $this.position()['left']
            }, { duration: 300 });
    });

脚本的其余部分

 var TabbedContent = {
        current: {i:null, obj:null},
        init: function() {
            $(".tab_item").click(function() {
            $(".tab_item").removeClass("tab_item_color");
            $(this).addClass("tab_item_color");
                var $this = $(this);
                TabbedContent.slideContent($this);
            });
            TabbedContent.current.i = 0;
            TabbedContent.current.obj = $(".tabslider li").eq(0);
        },
        slideContent: function($obj) {
            var $container = $obj.closest(".tabbed_content"),        
                $contentContainer = $('.bodymainMaxS'),
                $tabslider = $contentContainer.find(".tabslider");
            var i = $obj.index() - 1;
            var $lis = $tabslider.find("li");
            $new = $lis.eq(i);
            if(i === TabbedContent.current.i) {
                return;
            }
            $lis.hide().filter($new.add(TabbedContent.current.obj)).show();
            var margin_1 = (i > TabbedContent.current.i) ? 0 : -$new.width();
            var margin_2 = (i < TabbedContent.current.i) ? 0 : -$new.width();
            $tabslider.stop().css({
                marginLeft: margin_1 + "px"
            }).animate({
                marginLeft: margin_2 + "px"
            }, 400);
            TabbedContent.current.i = i;
            TabbedContent.current.obj = $new;
        }
    }
    TabbedContent.init();

Answer 1

这是完整的JS修复替换整个javascript与此（you can test here with JSFiddle ）

删除了TabbedContent，因为没有使用它（如果你需要，你可以随时复制你的问题）

var isTabSelected = false;
var lastSelectedTabLeftPos;
$(".tab_item").mouseover(function() {
            var $this = $(this);
            $this.parent().find(".moving_bg").stop().animate({
                left: $this.position()['left']
            }, { duration: 300 });
    });
    $( ".tab_item" ).mouseout(function() {
    if(isTabSelected){

    $(".moving_bg").stop().animate({
                left: ""+lastSelectedTabLeftPos
            }, { duration: 300 });
    }else
    {
    $(".moving_bg").stop().animate({
                left: "0"
            }, { duration: 300 });
    }
        });
$(".tab_item").click(function() {
isTabSelected = true;
var $this = $(this);
lastSelectedTabLeftPos = $this.position()['left'];
});

如何将图像转换为原始位置

1 个答案: