Question

我有一张图片列表。在悬停时，我需要在每行上调用LI上的函数，该函数会隐藏除当前图像之外的该行中的所有图像。只有一个清单。我有JS为每一行添加数据属性（为简洁起见，这不包括在代码示例中）。如何挂钩在行上动态设置的数据属性以调用显示和隐藏每行图像的函数？目前，所有行都有动画。

的小提琴 http://jsfiddle.net/simply_simpy/2dNgF/

HTML

<div class="container" id="main">
<div id="add-8" class="row">
<div class="col-lg-11">
<ul class="list-unstyled list-inline the-wrap add-8 show-text">
<li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="3"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>
    </ul>
  </div>
</div>

CSS

    #main {
        background: #fff;
        overflow: hidden;
        min-height: 800px;
    }

    .wrap-the-wrap {
        position: relative;
    }

    .tell-story .hidden {
        display: none;
    }

    ul.the-wrap {
        overflow: hidden;
    }

    ul.the-wrap p {
        margin: 0;
    }

    ul.the-wrap img {
        width: 133px;
        height: auto;
    }

    ul.the-wrap .cover {
        position: absolute;
        bottom: -150px;
        left: 0;
    }

    ul.the-wrap .more {
        width: 37px;
        height: 36px;
        display: block;
        position: absolute;
        bottom: -15px;
        left: 0;

    }

    ul.the-wrap li {
        float: left;
        position: relative;
        padding-left: 0;
        padding-right: 0;
        margin-left: 2px;
    }

    ul.the-wrap .text {
        width: 300px;
        position: absolute;
        left: 150px;
        top: 30px;
        z-index: 1;
        display: none;
        color: #333;
    }

JS

$(document).on("mouseenter", ".add-8 li", function () {
        $(this).find(".cover").addClass('current');
        animateCover("-30px");
        $(this).find(".text").fadeIn("fast");
    });

    //covers image with white image
    $(document).on("mouseleave", ".add-8 li", function () {
        $(this).find(".cover").removeClass('current');
        animateCover("-150px");
        $(this).find(".text").fadeOut("fast");
    })

    function animateCover(pos) {
        $("li .cover")
                .not(".current")
                .stop()
                .animate({"bottom": pos}, 250);
    }

Answer 1

没有您说的数据属性的解决方案

$(document).on("mouseenter", ".add-8 li", function () {
    var $this = $(this);

    $this.find(".cover").addClass('current');
    animateCover(rowEls(this), "-30px");
    $this.find(".text").fadeIn("fast");
});

//covers image with white image
$(document).on("mouseleave", ".add-8 li", function () {
    $(this).find(".cover").removeClass('current');
    animateCover(rowEls(this), "-150px");
    $(this).find(".text").fadeOut("fast");
})

function rowEls(el){
    var $this = $(el), top = $this.offset().top;

    return $this.parent().children().filter(function(){
        return $(this).offset().top == top;
    })
}

function animateCover($rowels, pos) {
    $rowels.find('.cover')
    .not(".current")
    .stop()
    .animate({"bottom": pos}, 250);
}

演示：Fiddle

Answer 2

注意：由于脚本已经很大，因此添加为不同的答案

使用数据属性

$(document).on("mouseenter", ".add-8 li", function () {
    var $this = $(this), rowId = $this.attr('data-row');

    $this.find(".cover").addClass('current');
    animateCover($this.siblings('[data-row="' + rowId + '"]'), "-30px");
    $this.find(".text").fadeIn("fast");
});

//covers image with white image
$(document).on("mouseleave", ".add-8 li", function () {
    var $this = $(this), rowId = $this.attr('data-row');

    $this.find(".cover").removeClass('current');
    animateCover($this.siblings('[data-row="' + rowId + '"]'), "-150px");
    $this.find(".text").fadeOut("fast");
})



$(window).resize(assignRowIds);
assignRowIds();

function assignRowIds(){
    var $els = $('.add-8 li'), row = 0, top;
    $els.each(function(){
        var $this = $(this), eltop = $this.offset().top;

        if(eltop != top){
            row++;
            top = eltop;
        }

        $this.attr('data-row', row)
    })
}

function animateCover($rowels, pos) {
    $rowels.find('.cover')
    .not(".current")
    .stop()
    .animate({"bottom": pos}, 250);
}

演示：Fiddle

jQuery以每行为基础显示图像

2 个答案: