Slide div horizontally from off screen to center?

Question

This is the javascript used in the gayadesign tabs

var TabbedContent = {
    init: function() {  
        $(".tab_item").mouseover(function() {

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

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

        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: 300
    });
}
}

$(document).ready(function() {
TabbedContent.init();
});

How do I implement that into the provided HTML?

I am trying to imitate this: http://www.gayadesign.com/scripts/tabbed/

<body>

{block:Posts}

<div id="outer">
{block:Photo}
<img src="http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png">
<div id="tooltip">

<div class="photo">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}

</div>
{/block:Photo}
</div>

{/block:Posts}
</body>

Answer 1

JQuery's .animate() function can animate any arbitrary CSS property.

For instance:

$('#item1').animate({left: '+=50px'});

Will move #item1 50px to the right. You can use absolute numbers like '50px' if you wish.

Slide div horizontally from off screen to center?

Question

1 answers

solution1
1 2010-12-30 19:58:09

Slide div horizontally from off screen to center?

Question

1 answers

solution1 1 2010-12-30 19:58:09

solution1
1 2010-12-30 19:58:09