divを画面外から水平方向にスライドさせますか？

これはJavascriptをどのように提供されたHTMLにこれを実装するのですgayadesignタブdivを画面外から水平方向にスライドさせますか？

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

に使用されていますか？

私はこれを真似しようとしています：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>

出典

2010-12-30 Earl Larson

コードをそのまま表示するには、各行を4つの空白でインデントします（または、上の** {} **ボタンをクリックして選択します）。 – BoltClock

ああ、それは私がサインアップしたときに助けになったでしょう。ありがとうボルト！ –

私はあなたにスクリプトのリンクを教えてくれたと確信しています...スクリプトを見てみましたか？あなたがスクリプトそのものを理解できないのであれば、おそらく**あなたが望む完全な答えを得られないでしょう。 – jondavidjohn

jQueryの.animate()機能を任意のCSSプロパティをアニメーション化することができます。例えば

：

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

右に#item1は50pxを移動します。あなたが望むなら、'50px'のような絶対数を使うことができます。

出典

2010-12-30 19:58:09

イメージのマウスオーバー時にどうすればいいですか？ –

@エール私は一緒に投げたこの例を見て：http://jsfiddle.net/8AMa4/ –

それは素晴らしいようだが、私の問題は、私は自分のタブを持つために各投稿が必要です。したがって、最初のタブと関連する1つのdivに写真の投稿のタグを置くと、その写真のすべての投稿がそのタブに表示されます。私はそれぞれのタブを持っている必要があります。それで私は最初からビルドしていたのです。 –

divを画面外から水平方向にスライドさせますか？

答えて

関連する問題