Question

我有以下要素

<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并显示下一个（这很好）。此时，在滑动效果之后，第二个.title的{{1}}也会淡入（这也有效）。

但是，我还希望第一个div的newsfeed现在.title，以便当我再次访问时，hide()显示在.title幻灯片之后in。这不会发生（即，一旦你滑过横幅一次，标题总是保持不变）。我究竟做错了什么？我隐藏了div！那为什么不被隐藏？

由于

Answer 1

请记住 - 对于.hide（），您需要 jQuery UI效果，否则它将失败，因为Object的方法不存在（幻灯片），因此隐藏的构造（... 。）会失败。
重复使用您已有的DOM元素，否则您的脚本会向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

玩得开心。

jQuery - 无法隐藏隐藏父级的兄弟姐妹

1 个答案: