0

タグをアニメーション化しようとしていますが、探している効果を得るためのacss プロパティがあります。table-cell誰かが jQuery を使用してクリックしたときにアニメーション化しようとしていますが、機能していませtable-cellんtable-cell。これが私が取り組んでいるページです。

ここにフィドルがあります：http://jsfiddle.net/nEryb/

.clip{
    background-color: #373938;
    min-height: 100%;
    height: 100%;
    width: 300px;
    background-position: center center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: table-cell;
    box-shadow: -2px 0 5px rgba(0,0,0,.2), -2px -2px 5px rgba(0,0,0,.2), -2px 2px 5px rgba(0,0,0,.2);
    text-align: center;
    filter: grayscale(100%);
    filter: url(/media/images/new/filters.svg#grayscale);
    filter: gray;
    -webkit-filter: grayscale(1);
    position: relative;
}

ここにjqueryがあります：

$(document).on("click", "a.clip", function(e){
    e.preventDefault();
    window.history.pushState("Gallery", "Gallery", $(this).attr("href"));
    $("a.clip.hover").animate({
        height: "20px"
    }, "fast");
});

これを機能させるにはどうすればよいですか？

4

2 に答える 2

1

display: inline-blocktable-model では、相対的なセルのサイズを変更できないため、使用できます。とにかく、あなたのjQueryコードでは、$(this)クリックされた特定のボックスをアニメーション化するためにセレクターを使用する必要があります

$(document).on("click", "a.clip", function(e) {
    e.preventDefault();
    window.history.pushState("Gallery", "Gallery", $(this).attr("href"));
    $("a.clip.hover").animate({
        height: "20px"
    }, "fast");
});

ここに更新があります：http://jsfiddle.net/nEryb/1/

また、セレクターがa.clip.hover. hoverの代わりにイベントを使用する必要がありclickます。

于 2013-07-24T02:47:55.773 に答える