2012-02-28 13 views
0

私がように私のマークアップで私のホームページのスライダーを持っている...私は親Liがある場合フェードインするために私のアニメーション要素の各子供が欲しいフェード要素= X

 <li id="fragment-3" class="slides virtualsation ui-tabs-panel ui-tabs-hide" style="display: list-item;"> 
       <h1>Virtualisation</h1> 
       <p>By implementing virtualisation into Council managed to save them over £250,000 in annual expenditure.</p> 
       <div class="animation"> 
        <div class="big-server"><img src="_includes/images/sliders/big-server.png"></div> 
        <div class="arrow"><img src="_includes/images/sliders/arrow.png"></div> 
        <div class="small-server-one"><img title="Title Text Blah" src="_includes/images/sliders/small-server.png"></div> 
        <div class="small-server-two"><img title="Title Text Blah" src="_includes/images/sliders/small-server.png"></div> 
        <div class="small-desktop"><img title="Title Text Blah" src="_includes/images/sliders/small-desktop.png"></div> 
       </div> 
     </li> 

表示のインラインスタイル:リストアイテム。

これはjQueryで可能ですか? (.closestの使用についていえ

私は)私が正しく理解している場合、このような何かが働くだろう...

+0

これはjQueryUIのタブウィジェットによって駆動されますか?タブイベントに簡単にバインドできる場合 – charlietfl

答えて

1

表示をリスト項目に変更する時期と方法を教えてくれれば、もっと簡単になります。

jquery関数$ .Defferedを見て、li要素の表示を変更するメソッドにアタッチすることができます。そうすれば、後で表示をリッスンする関数を後でリスト項目に設定することができます。

かそこらのように、あなたは、李表示を定義する方法の中でそれをアニメーション化することができます:それはスライダー

ですので、私は矢印が押されたとき、それは変更と仮定して、リスト項目ことをあなたはしました私たちを見せてくれる人は、他の人の中のひとつです。

// when you click next 
$('.arrow-next').on('click', function(){ 

    // hides the current, sets the next to list-item and caches the 'next' li 
    var nextLi = $('li.current').css('display','hidden').next('li').css('display','list-item') 

    // fades in every element in the div.animation that is within the 'next' li element 
    $('div.animation *', nextLi).fadeIn() 


}) 

これはあなたを助けることができる願っています。上記の例で問題が解決しなかった場合は、リスト項目ではなくリスト項目に移行する方法をどのように扱うのかよく分かりません。とにかく、それが助けてくれることを願う。

0

をIdは、インラインスタイルでのdivを対象と方法がわからwwasnt:

var hasInlineListItem = $('#whatever').closest('li').is(function() { 
    return this.style.display == 'list-item'; 
}); 

if (hasInlineListItem) { 
    //do whatever you want 
} 

jsFiddle Demo to illustrate how it works

jQueryには、使用できるいくつかのfilter methodsがあります。ここではis()を使用しました。これはブール値を返します。

関連する問題