Question

希望标签箭头在悬停时滑动但不会移动内容直到单击标签，这可能吗？请参阅jsfiddle例如

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

Answer 1

以下是添加了缓动的动画。第一个动画：

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

第二个动画：

$(obj).parent().parent().find(".tabslider").stop().animate({
    marginLeft: margin + "px"
}, {
    duration: 800,
    easing: 'swing' // the type of easing
});

Answer 2

要在悬停时滑动的标签箭头添加

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

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

并更改此行

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

到这个

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

是否可以将鼠标悬停在选项卡上并单击div幻灯片

2 个答案: