0

私には4つdivの'またはtd'があり、いずれかをクリックすると、それらすべてが左にスライドし、残りの3つが消え、クリックした1つが残るはずです。

きちんとしたアニメーション効果も欲しいです。

私はこれを試しましたが、スタイルにいくつかのエラーがあります:

//xControl is a link inside the td
$(xControl).parent().siblings().each(function fn() {
    setTimeout(function fn() {
        $(this).animate({ width: 'toggle' });
    }, 800);
});

私も試しました:

$(this).hide("slide", { direction: "right" }, 500);

これも機能しません。

私は何が間違っているのですか?

4

3 に答える 3

2
$(xControl).on("click", function(){
    var thisDiv = $(this);
    var sibs = thisDiv.siblings();
    sibs.animate({'left':'-=150'},{queue:false,complete:function(){
            $(this).animate({'opacity':0});
        }
    });
    thisDiv.animate({'left':'-=150'},{queue:false});
});

これは多かれ少なかれ私がそれを行う方法です。スライドとフェード以外に、必要なアニメーションを実行できます。jquery-ui の組み込み関数を使用することもできますが、個人的にはよりカスタマイズ可能なアニメーションのために animate が好きです。

http://jsfiddle.net/AXkxQ/1/のように見えるものを示すための私のフィドルは次のとおりです

于 2012-06-12T17:38:49.273 に答える
1

これを試してみてください

.item
{ 
    width:50px; 
    height:50px;
    margin:0 5px 0 0;
    display:inline-block;
    position:relative;            
    background:lime;
    cursor:pointer;        
}

<div class="con">
    <div class="item">DIV 1</div>
    <div class="item">DIV 2</div>
    <div class="item">DIV 3</div>
    <div class="item">DIV 4</div>
</div>

$(".con .item").click(function() {
  $(this).siblings().hide("slow");    
});​
于 2012-06-12T17:00:00.133 に答える
0

あなたはで試すことができます:

$(xControl).parent().siblings().each(function fn() {
setTimeout(function fn() {
    $(this).animate({ left: '-=500px' });
}, 800);

});

あなたはあなたがあなたのCSSに相対的なものとして設定された位置を持っていることを確認する必要がありますxControl{position: relative;}

于 2012-06-12T16:50:57.140 に答える