jQuery的 - 無法掩飾隱藏父

的兄弟姐妹，我有以下要素jQuery的 - 無法掩飾隱藏父

<div id="newsfeeds"> 
    <div class="newsfeed"> 
     <img src="/path/to/image/1" /> 
     <span class="title">Text 1</span> 
    </div> 
    <div class="newsfeed"> 
     <img src="/path/to/image/2" /> 
     <span class="title">Text 2</span> 
    </div> 
    <div class="newsfeed"> 
     <img src="/path/to/image/3" /> 
     <span class="title">Text 3</span> 
    </div> 
</div>

的.newsfeed都hidden除了最上面的一個（這樣的負荷，只有第一個是可見的）。

當我點擊導航，如由以下的jQuery控制這些新聞源滑動：

var first = $('.newsfeed:first'); 
var next = first.next(); 
first.hide('slide',{duration: 1500}, function(){ 
    // Append as many needed 
    $(this).appendTo('#newsfeeds'); 

    // THIS LINE DOES NOT WORK! 
    first.find('.title').hide(); 

}); 
next.show('slide',{direction : 'right' , duration: 1500}); 

setInterval(function(){ 
    next.find('.title').fadeIn(500); 
},1500 + 100);

在第一負載，第一.newsfeed是可見的，並且.title它也被加載。一旦我點擊「下一步」，我想要幻燈片隱藏第一個newsfeed並顯示下一個（這工作得很好）。此時，在滑動效果之後，第二個newsfeed的.title也淡入（這也適用）。

不過，我也希望現在hide()第一個div到.title，這樣，當我再次給它來了，.title顯示了newsfeed幻燈片後，不會發生這種情況（即，一旦你通過滑動橫幅一次，標題始終保持）。我究竟做錯了什麼？我隱藏了div！那爲什麼不被隱藏？

感謝

來源

2014-01-22 Kousha

記住 - 爲.hide（），你需要jQuery UI的效果，否則就會失敗爲對象的方法不存在（幻燈片），所以隱藏的結構（。 ..）將失敗。
重複使用已有的DOM元素，否則您的腳本會將f ***附加到DOM。

也許這會爲你工作： 有一些東西，淡入淡出，設置時間，經過的元素，然後從起點開始。

HTML：

<div id="newsfeeds"> 
<div class="newsfeed"> 
    <img src="http://www.iconshock.com/img_jpg/SHINE7/communications/jpg/256/phone_icon.jpg" /> 
    <span class="title">Text 1</span> 
</div> 
<div class="newsfeed" style="display:none;"> 
    <img src="http://www.iconshock.com/img_jpg/REALVISTA/mobile/jpg/256/android_platform_icon.jpg" /> 
    <span class="title" style="display:none;">Text 2</span> 
</div> 
<div class="newsfeed" style="display:none;"> 
    <img src="http://www.iconshock.com/img_jpg/LUMINA/accounting/jpg/256/plane_icon.jpg" /> 
    <span class="title" style="display:none;">Text 3</span> 
</div>

一些javascript：

var first = $('#newsfeeds .newsfeed:first-child'), 
    current = first; 
    next = first.next(), 
    hideTime = 2000, 
    fadeTime = 500; 

function showHideNext() { 
    console.log('next: ' + next.find('.title').html()); 
    console.log('current: ' + current.find('.title').html()); 
    current.hide('slide', {}, hideTime, function() { 
     current.find('.title').css('display', 'none'); 
     next.show('slide', {}, fadeTime, function() { 
       next.find('.title').show(fadeTime); 
      }); 
     }); 
    current = next; 
    next = next.next().length ? next.next() : first; 
} 

setInterval(function(){ 
    showHideNext(); 
}, hideTime + fadeTime + 100);

a little jsFiddling lunch time

有樂趣。

來源

2014-01-23 13:03:24 beltrone

jQuery的 - 無法掩飾隱藏父

回答

相關問題