0

タブの矢印をホバー時にスライドさせたいが、タブがクリックされるまでコンテンツを移動しないようにしたいのですが、これは可能ですか? たとえば、jsfiddle を参照してください

フィドル: http://jsfiddle.net/cC4tU/1/

Jクエリ

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

イージングを追加したアニメーションを次に示します。最初のアニメーション:

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

そして 2 番目のアニメーション:

$(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

ホバー追加でスライドするタブ矢印

   $(".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() {
于 2012-08-06T18:02:47.427 に答える