javascript - jQueryは、行ごとに画像を表示します

Question

私は画像のリストを持っています。ホバーすると、行ごとに LI で関数を呼び出す必要があります。これにより、現在の画像を除くその行のすべての画像が非表示になります。リストは 1 つだけです。各行にデータ属性を追加する 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);
    }

score 1 · Accepted Answer

あなたが言ったデータ属性のないソリューション

$(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);
}

デモ:フィドル

score 1 · Accepted Answer

注：スクリプトはすでに大きいため、別の回答として追加します

データ属性付き

$(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);
}

デモ:フィドル

javascript - jQueryは、行ごとに画像を表示します

2 に答える 2

Related

Reference