javascript - 悬停时向上滑动，悬停时向下滑动(没有独特的类别)

Question

我试图让一个 div 在它的容器悬停时向上滑动，当你离开鼠标时向下滑动，向上滑动工作正常但我不能让这个滑出，它直接消失了。

我无法唯一地标识每个容器，因为信息是从我无法控制的循环中提取的。

我明白为什么会发生这种情况 - 这是因为该类不再有悬停显示 block ，因此消失了，但我不知道如何修复。我也尝试过延迟，但没有成功。

在这里 fiddle : http://jsfiddle.net/u7ttx2dd/2/

HTML:

             <main>
                <section class="entries">
            <section class="entry">
            <div class="container">
                <img width="800" height="533" src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg">
                <div class="title">
                     Title
                </div>
                <div class="hover" style="bottom: -1000px;">
                    <div class="title">
                         Title
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec quam et dui bibendum convallis. Morbi nec porta elit. Pellentesque
                    </p>
                </div>
            </div>
            </section>
            <section class="entry">
            <div class="container">
                <img width="800" height="533" src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg">
                <div class="title">
                     Title
                </div>
                <div class="hover" style="bottom: -1000px;">
                    <div class="title">
                         Title
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec quam et dui bibendum convallis. Morbi nec porta elit. Pellentesque
                    </p>
                </div>
            </section>
             </main>

jQuery

           jQuery(".entries .entry .container").hover(
                function() {
                    jQuery(this).addClass("selected");
                    jQuery(".entries .entry .container.selected .hover").stop().animate({bottom: '0'}, 1000);
                },
                function() {
                    jQuery(".entries .entry .container .hover").stop().animate({bottom: '-1000'}, 1000);
                    jQuery(this).removeClass("selected");
                }
            );

HTML

            main .entry {
                overflow: hidden;
                display: inline;
                float: left;
                width: 33.33333125%;
                padding: 0 8px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                margin-bottom: 20px;
            }
            main .entry img {
                display: block;
                max-width: 100%;
                height: 180px;
            }
            main .entry a {
                color: #fff;
                text-decoration: none
            }
            main .entry .container {
                position: relative
            }
            main .entry .container.selected .hover {
                display: block
            }
            main .entry .title {
                background: #000;
                color: #fff;
                text-decoration: none;
                font-size: 18px;
                padding: 15px;
            }
            main .entry .hover {
                background: #23252b;
                color: #fff;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                bottom: -1000px;
                display: none;
                padding: 20px 20px 20px 20px;
            }
            main .entry .hover .title {
                padding: 0;
                background: none;
                width: 80%;
                margin-bottom: 30px;
            }
            main .entry .hover .moresmall:hover {
                background-color: #2f3035
            }

Answer 1

我已经从 CSS 中删除了“显示”样式，将其留给 jQuery，它似乎已经解决了您遇到的问题。

http://jsfiddle.net/u7ttx2dd/6/

main .entry {
    overflow: hidden;
    display: inline;
    float: left;
    width: 33.33333125%;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px;
}
main .entry img {
    display: block;
    max-width: 100%;
    height: 180px;
}
main .entry a {
    color: #fff;
    text-decoration: none
}
main .entry .container {
    position: relative
}
main .entry .container.selected .hover {

}
main .entry .title {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 15px;
    background: #000;
}
main .entry .hover {
    background: #000;
    color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: -1000px;
    padding: 20px 20px 20px 20px;
}
main .entry .hover .title {
    padding: 0;
    background: none;
    width: 80%;
    margin-bottom: 30px;
}
main .entry .hover .moresmall:hover {
    background-color: #2f3035
}