2

jQueryのエフェクトを使用してslide要素間の遷移を行っています。jsfiddleを表示するのが最も簡単です

メニューリンクは何もしません。「詳細」リンクをクリックすると、問題が表示されます。「スライド」を使用して新しい div を同時に表示し、古い div を非表示にしようとしています。問題は、新しい div が古い div の隣にスライドしないことです。その横と下にスライドしてからアニメーションの最後で、突然正しい位置に飛び出します。私が目指している効果はかなり明確なはずです - スライドショーで見られるように、div がお互いを横に「押す」ようにしたいのです。何が間違っているのですか :\

これを正しく機能させるために、必要に応じて CSS やマークアップ、JS を調整することができます。

4

1 に答える 1

1

このようにということですか？

jsフィドル

HTML:

<div id='container'>
    <a href='#' class='button'>Click</a>
    <div class='show left'>I'm showing!</div>
    <div class='hide right'>I was hidden, but now I showed.</div>
</div>

CSS:

.button{
    padding:5px;
    background:#eee;
    display:block;
    text-decoration:none;
    clear:both;
    text-align:center;
}
#container{
    width:350px;
    border:1px solid black;
}
#container:after{
    content:"";
    display:block;
    clear:both;
}
.left{
    float:left;
    padding:3px;
}
.right{
    float:right;
    padding:3px;
}
.hide{
    display:none;
}

Javascript:

$('.button').click(function(e){
    e.preventDefault();
    $('.left').toggle('slide',{'direction':'left'},500);
    $('.right').toggle('slide',{'direction':'right'},500);
});
于 2014-03-16T12:59:54.197 に答える