可以在不滚动所有div的情况下滑动下一个div?

时间:2012-08-06 22:12:14

标签: jquery

刚刚使用标签完成滚动div,但试图找出一种方法来制作它,例如你点击链接4而不是脚本滚动所有div来获得数字4我想它所以它滚动out div1和div4中的滚动

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

jquery的

$.extend($.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;
    },
    easeInOutElastic: function (x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
    }

    });
//EXPAND PAGE DIV CONTENT
$(".tab_item").hover(function(){
         var background = $(this).parent().find(".moving_bg");
        $(background).stop().animate({
            left: $(this).position()['left']
        }, {
            duration: 700, easing: 'easeInOutElastic'
        });
    });

var TabbedContent = {
    init: function() {    
        $(".tab_item").click(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: 1500, easing: 'easeInOutQuad'
        });
    }
}
TabbedContent.init();

1 个答案:

答案 0 :(得分:1)

Dwhizz,你想要的当然是可能的。

我不打算为你写,但据我所知,所有的更改都在slideContent

策略:

  • 隐藏除当前和新
  • 之外的所有tablider元素
  • 根据两个可见项目计算保证金
  • 动画(可能没有变化)
  • 下次记住当前的tablider元素。