0

Wanted the tab arrow to slide on hover but not move the content un till the tab is clicked, is this possible? please see jsfiddle for example

fiddle: http://jsfiddle.net/cC4tU/1/

Jquery

jQuery.extend(jQuery.easing, {
     easeInOutQuad: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
    }
});

//EXPAND PAGE DIV CONTENT
var TabbedContent = {
    init: function() {  
        $(".tab_item").mouseover(function() {

            var background = $(this).parent().find(".moving_bg");

            $(background).stop().animate({
                left: $(this).position()['left']
            }, {
                duration: 500 
            });

            TabbedContent.slideContent($(this));

        });
    },

    slideContent: function(obj) {

        var margin = $(obj).parent().parent().find(".slide_content").width();
        margin = margin * ($(obj).prevAll().size() - 1);
        margin = margin * -1;

        $(obj).parent().parent().find(".tabslider").stop().animate({
            marginLeft: margin + "px"
        }, {
            duration: 800
        });
    }
}

TabbedContent.init();
4

2 回答 2

0

Here's are your animations with easing added. The first animation:

$(background).stop().animate({
    left: $(this).position()['left']
}, {
    duration: 500 
    easing: 'swing' // the type of easing
});

And the second animation:

$(obj).parent().parent().find(".tabslider").stop().animate({
    marginLeft: margin + "px"
}, {
    duration: 800,
    easing: 'swing' // the type of easing
});
于 2012-08-06T17:59:08.093 回答
0

the tab arrow to slide on hover add

   $(".tab_item").hover(function(){
         var background = $(this).parent().find(".moving_bg");

        $(background).stop().animate({
            left: $(this).position()['left']
        }, {
            duration: 500
        });
    });

and change this line

   $(".tab_item").mouseover(function() {

to this

   $(".tab_item").click(function() {
于 2012-08-06T18:02:47.427 回答