david david - 3 months ago 10
jQuery Question

How to get image to original position

Fiddle:
https://jsfiddle.net/r73b14y5/3/

script works fine but cant get the image to slide back to the original location if another link is not clicked.

at the moment the image stays where ever it last hovered over, instead of only staying at a link if the new link was clicked. and sliding back to the original link if nothing is clicked.

Also whats the best way to delay the hover state so as the mouse flys over the element quickly it doesnt activate. hover intent.

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>


** key part of Script:**

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


rest of script

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

Here is the complete JS fixed replace whole javascript with this one (you can test here with JSFiddle )

removed TabbedContent because that was not being used (if you need that you can always copy from your question)

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'];
});
Comments